{#
/**
 * @file
 * Template for FFmpeg Media conversion profiles list page.
 *
 * Available variables:
 * - profiles: Flat array of all profile data (backward-compatible).
 * - profile_groups: Profiles grouped by category, each containing:
 *   - key: Category key (standard, streaming, gpu).
 *   - label: Human-readable category label.
 *   - profiles: Array of profile data, each containing:
 *     - id: Machine name of the profile.
 *     - label: Human-readable label.
 *     - description: Profile description.
 *     - output_summary: Formatted string of enabled outputs.
 *     - output_count: Number of enabled outputs.
 *     - is_default: Whether this is the default profile.
 *     - generate_thumbnail: Whether thumbnail generation is enabled.
 *     - primary_codec: Uppercase primary codec name (AV1, VP9, etc.).
 *     - is_gpu: Whether hardware acceleration is required.
 *     - is_streaming: Whether the profile uses HLS/DASH.
 *     - output_pills: Array of {container, codec} for output badges.
 *     - edit_url: URL to edit the profile.
 *     - clone_url: URL to clone the profile.
 *     - delete_url: URL to delete the profile (NULL for default).
 *     - set_default_url: URL to set as default (NULL for current default).
 */
#}
<div class="ffmpeg-profiles">

  {# Introduction #}
  <div class="ffmpeg-profiles__section ffmpeg-profiles__intro">
    <h3>{{ 'What are Conversion Profiles?'|t }}</h3>
    <p>{{ 'A conversion profile is a reusable preset that defines how uploaded videos are processed by FFmpeg. Each profile contains one or more output format configurations — for example MP4 with H.264 for maximum browser compatibility, or WebM with VP9 for optimal file size.'|t }}</p>
    <p>{{ 'When a video is uploaded, the assigned profile determines which output files are generated, at what quality, and with which settings. Create multiple profiles for different use cases:'|t }}</p>
    <div class="ffmpeg-profiles__use-cases">
      <div class="ffmpeg-profiles__use-case">
        <span class="ffmpeg-profiles__use-case-icon" aria-hidden="true">&#9881;</span>
        <div>
          <strong>{{ 'Web-optimized'|t }}</strong>
          <span>{{ 'Fast loading, good quality. CRF 28, preset 6.'|t }}</span>
        </div>
      </div>
      <div class="ffmpeg-profiles__use-case">
        <span class="ffmpeg-profiles__use-case-icon" aria-hidden="true">&#9733;</span>
        <div>
          <strong>{{ 'High quality'|t }}</strong>
          <span>{{ 'Archival or large screens. CRF 18, two-pass.'|t }}</span>
        </div>
      </div>
      <div class="ffmpeg-profiles__use-case">
        <span class="ffmpeg-profiles__use-case-icon" aria-hidden="true">&#128241;</span>
        <div>
          <strong>{{ 'Mobile / low bandwidth'|t }}</strong>
          <span>{{ 'Small files, max 720p. CRF 32, 96k audio.'|t }}</span>
        </div>
      </div>
    </div>
  </div>

  {# Settings Reference #}
  <div class="ffmpeg-profiles__section ffmpeg-profiles__reference">
    <h3>{{ 'Settings Reference'|t }}</h3>
    <div class="ffmpeg-profiles__settings-grid">
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Output format'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Container (MP4, WebM, OGG) and video codec (H.264, VP9, AV1). Each enabled output produces a separate converted file.'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'CRF'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Constant Rate Factor — controls quality vs. file size. Lower values = higher quality, larger files. Typical range: 18–28 (H.264), 25–35 (VP9).'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Preset'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Encoding speed. 0 = slowest with best compression, 9 = fastest with larger files. A preset of 6 is a good compromise for most use cases.'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Audio'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Audio codec and bitrate. AAC is the most compatible, Opus offers better quality at lower bitrates. 128k is a good default for speech and music.'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Resolution limit'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Max width/height to downscale videos. Aspect ratio is preserved. Leave empty to keep the original resolution.'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Two-pass'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Analyzes the video in a first pass, then encodes optimally in a second. More consistent quality at the cost of roughly double the encoding time.'|t }}</div>
      </div>
      <div class="ffmpeg-profiles__setting">
        <div class="ffmpeg-profiles__setting-label">{{ 'Thumbnail'|t }}</div>
        <div class="ffmpeg-profiles__setting-desc">{{ 'Captures a still image at a specified timestamp (in seconds) to use as a video poster / preview image.'|t }}</div>
      </div>
    </div>
  </div>

  {# Grouped Profile List #}
  {% if profile_groups %}
    {% for group in profile_groups %}
      <div class="ffmpeg-profiles__section ffmpeg-profiles__group ffmpeg-profiles__group--{{ group.key }}">
        <h3>
          <span class="ffmpeg-profiles__group-icon ffmpeg-profiles__group-icon--{{ group.key }}" aria-hidden="true"></span>
          {{ group.label }}
          <span class="ffmpeg-profiles__count">{{ group.profiles|length }}</span>
        </h3>

        <div class="ffmpeg-profiles__table">
          {% for profile in group.profiles %}
            <div class="ffmpeg-profiles__row{% if profile.is_default %} ffmpeg-profiles__row--default{% endif %}">
              <div class="ffmpeg-profiles__row-main">
                <span class="ffmpeg-profiles__codec-badge ffmpeg-profiles__codec-badge--{{ profile.primary_codec|lower }}">{{ profile.primary_codec }}</span>
                <div class="ffmpeg-profiles__row-info">
                  <div class="ffmpeg-profiles__row-title-line">
                    <span class="ffmpeg-profiles__row-title">{{ profile.label }}</span>
                    {% if profile.is_default %}
                      <span class="ffmpeg-profiles__badge ffmpeg-profiles__badge--default">{{ 'Default'|t }}</span>
                    {% endif %}
                    {% if profile.is_gpu %}
                      <span class="ffmpeg-profiles__badge ffmpeg-profiles__badge--gpu">{{ 'GPU'|t }}</span>
                    {% endif %}
                    <span class="ffmpeg-profiles__row-id">{{ profile.id }}</span>
                  </div>
                  {% if profile.description %}
                    <div class="ffmpeg-profiles__row-desc">{{ profile.description }}</div>
                  {% endif %}
                  <div class="ffmpeg-profiles__row-outputs">
                    {% for pill in profile.output_pills %}
                      <span class="ffmpeg-profiles__output-pill">{{ pill.container }}<span class="ffmpeg-profiles__output-pill-codec">{{ pill.codec }}</span></span>
                    {% endfor %}
                    {% if profile.generate_thumbnail %}
                      <span class="ffmpeg-profiles__output-pill ffmpeg-profiles__output-pill--thumb">Thumb</span>
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="ffmpeg-profiles__row-actions">
                <a href="{{ profile.edit_url }}" class="ffmpeg-profiles__btn ffmpeg-profiles__btn--edit" aria-label="{{ 'Edit profile @name'|t({'@name': profile.label}) }}">{{ 'Edit'|t }}</a>
                <a href="{{ profile.clone_url }}" class="ffmpeg-profiles__btn ffmpeg-profiles__btn--clone" aria-label="{{ 'Clone profile @name'|t({'@name': profile.label}) }}">{{ 'Clone'|t }}</a>
                {% if profile.set_default_url %}
                  <a href="{{ profile.set_default_url }}" class="ffmpeg-profiles__btn ffmpeg-profiles__btn--default" aria-label="{{ 'Set @name as default profile'|t({'@name': profile.label}) }}">{{ 'Set default'|t }}</a>
                {% endif %}
                {% if profile.delete_url %}
                  <a href="{{ profile.delete_url }}" class="ffmpeg-profiles__btn ffmpeg-profiles__btn--delete" aria-label="{{ 'Delete profile @name'|t({'@name': profile.label}) }}">{{ 'Delete'|t }}</a>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="ffmpeg-profiles__section ffmpeg-profiles__list">
      <h3>{{ 'Configured Profiles'|t }} <span class="ffmpeg-profiles__count">0</span></h3>
      <div class="ffmpeg-profiles__empty">
        <p>{{ 'No conversion profiles configured yet. Click "Add conversion profile" above to create your first one.'|t }}</p>
      </div>
    </div>
  {% endif %}
</div>
