{%assign validVersions = include.versions | split: ","%}
{%assign numValidVersions = validVersions | size%}

<ul class="nav nav-tabs docs-grouped-tabs">
  {%for version in site.data.generated_presets[include.stack]%}
    {%if site.data.stacks.hideVersions[version] == true%}{%continue%}{%endif%}
    {%if numValidVersions == 0 or validVersions contains version[0]%}
      <li {%if version[0] == site.data.stacks[include.stack].recommended_version%}class="active"{%endif%}>
        <a href="#presets-{{include.stack}}-{{include.filterkey}}-{{include.filtertype}}-{{include.filterval}}-{{version[0] |replace:'.','-'}}" data-toggle="tab">{{version[0]}}</a>
      </li>
    {%endif%}
  {%endfor%}
</ul>

<div class="tab-content">
  {%for version in site.data.generated_presets[include.stack]%}
    {%if site.data.stacks.hideVersions[version] == true%}{%continue%}{%endif%}
    {%if numValidVersions == 0 or validVersions contains version[0]%}
      {%assign hasAdaptive = false%}
      <div id="presets-{{include.stack}}-{{include.filterkey}}-{{include.filtertype}}-{{include.filterval}}-{{version[0] |replace:'.','-'}}" class="tab-pane fade {%if version[0] == site.data.stacks[include.stack].recommended_version%} in active{%endif%}">
        <p>
          These are supported if you were to specify <code>{{include.stack}}_stack: "{{version[0]}}"</code> in your Assembly Instructions.

          The recommended version is: <code>{{site.data.stacks[include.stack].recommended_version}}</code>
        </p>
        <table class="table table-bordered table-striped table-presets">
          {%for presets in version[1]%}
            {%assign lastPreset=presets[1]%}
          {%endfor%}
          <thead>
            <tr>
              {%for property in lastPreset.properties %}
                <th class="centric">
                  {{property[0] |replace: '_', ' ' |capitalize}}
                </th>
              {%endfor%}
            </tr>
          </thead>
          <tbody>
            {%for presets in version[1]%}
              {%assign preset=presets[1]%}
              {%if preset.properties.name contains 'hls-' or preset.properties.name contains 'dash-'%}
                {%assign hasAdaptive = true%}
              {%endif%}

              {%if include.filterkey == "" or !include.filterval == "" or preset[include.filterkey] == include.filterval or (include.filtertype == "substring" and preset[include.filterkey] contains include.filterval)%}
                <tr>
                  {%for property in preset.properties %}
                    <td {%if forloop.index0 != 0%} class="centric"{%endif%}>
                      {%if property[1]%}
                        <code>
                          {{property[1]}}
                        </code>
                      {%else%}
                        <img src="{{site.edgly_cdn}}/assets/images/icons/table-cross.svg" width="15" height="15" alt="cross" title="N/A">
                      {%endif%}
                    </td>
                  {%endfor%}
                </tr>
              {%endif%}
            {%endfor%}
          </tbody>
        </table>

        <p>
          You can override any preset's setting, such as a file's bitrate, or even the file's <a href="/docs/supported-formats/">format &amp; codecs</a> via
          a <dfn>Robot</dfn>'s <code>{{include.stack}}</code> parameter.
        </p>

        {%if hasAdaptive %}
          <p>
            The <code>hls-</code> and <code>dash-</code> presets are intended for use
            in combination with our <a href="{{site.data.robot_links["/video/adaptive"]}}">/video/adaptive</a> <dfn>Robot</dfn>.
          </p>
        {%endif%}
      </div>
    {%endif%}
  {%endfor%}


</div>