{#
/**
 * @file
 * FFmpeg Media UI dashboard template.
 *
 * Available variables:
 * - stats: Conversion statistics.
 * - queue_status: Queue status information.
 * - stats_cards: Stats cards render array (6 cards).
 * - stats_24h: 24-hour statistics render array.
 * - status_filter: Status filter pills render array.
 * - media_table: Video media table render array.
 * - pager: Pager render array.
 * - enhanced_queue_status: Enhanced queue status render array.
 * - setup_alert: Setup incomplete alert render array.
 * - system_status: System status section render array.
 * - ffmpeg_status: Raw FFmpeg status data.
 * - active_conversions: Active conversions section data.
 * - recent_conversions: Recent conversions section data.
 * - recent_failures: Recent failures section data.
 * - quick_actions: Quick action links array (label, url) for enabled modules.
 */
#}
<div class="ffmpeg-media-dashboard ffmpeg-dashboard" data-ffmpeg-dashboard>
  <div class="visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-ffmpeg-dashboard-live></div>

  {# Skip Navigation Links for keyboard users #}
  <nav class="ffmpeg-dashboard__skip-nav" aria-label="{{ 'Skip to dashboard section'|t }}">
    {% if show_operations %}
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-system-status">{{ 'Skip to System Status'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-stats">{{ 'Skip to Conversion Statistics'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-active">{{ 'Skip to Active Conversions'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-recent">{{ 'Skip to Recent Conversions'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-queue">{{ 'Skip to Queue Status'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-24h">{{ 'Skip to Last 24 Hours'|t }}</a>
      <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-failures">{{ 'Skip to Recent Failures'|t }}</a>
    {% endif %}
    <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-media">{{ 'Skip to Video Media'|t }}</a>
    <a class="ffmpeg-dashboard__skip-link visually-hidden focusable" href="#ffmpeg-section-actions">{{ 'Skip to Quick Actions'|t }}</a>
  </nav>

  {# 1. Setup Alert #}
  {% if setup_alert is not empty %}
    {{ setup_alert }}
  {% endif %}

  {# 2. Dashboard Header #}
  <div class="ffmpeg-dashboard-header">
    <h1>{{ 'Video Transcoding Dashboard'|t }}</h1>
    <p class="ffmpeg-dashboard-subtitle">{{ 'Monitor and manage video conversions'|t }}</p>
    <div class="ffmpeg-dashboard-meta">
      <span
        class="ffmpeg-dashboard-meta__item ffmpeg-dashboard-meta__item--refresh"
        data-ffmpeg-dashboard-refresh-state
        data-state="{{ live_refresh_enabled ? 'idle' : 'disabled' }}"
        role="status"
        aria-live="polite"
      >
        {{ live_refresh_enabled ? 'Live updates enabled'|t : 'Live updates disabled'|t }}
      </span>
      <span class="ffmpeg-dashboard-meta__item ffmpeg-dashboard-meta__item--updated">
        {{ 'Last update:'|t }}
        <time data-ffmpeg-dashboard-last-updated datetime="{{ 'now'|date('c') }}">{{ 'just now'|t }}</time>
      </span>
    </div>
  </div>

  {# Two-column layout: Content + Sidebar from the top #}
  <div class="ffmpeg-dashboard-main">

    {# Left column: all content sections #}
    <div class="ffmpeg-dashboard-content">

      {% if show_operations %}
      {# 3. System Status — FFmpeg Version + Hardware Encoders #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__system-status" id="ffmpeg-section-system-status">
        <h3>{{ 'System Status'|t }}</h3>
        <div class="ffmpeg-system-status-grid">
          {% if ffmpeg_status.available %}
            <div class="ffmpeg-status-indicator ffmpeg-status-indicator--ok">
              <span class="ffmpeg-status-indicator__icon" aria-hidden="true">&#10003;</span>
              <span class="ffmpeg-status-indicator__text">{{ 'FFmpeg Available'|t }}</span>
              <span class="ffmpeg-status-indicator__version">{{ ffmpeg_status.version }}</span>
            </div>
          {% else %}
            <div class="ffmpeg-status-indicator ffmpeg-status-indicator--error" role="alert">
              <span class="ffmpeg-status-indicator__icon" aria-hidden="true">&#10007;</span>
              <span class="ffmpeg-status-indicator__text">{{ 'FFmpeg Not Available'|t }}</span>
            </div>
          {% endif %}

          {% if ffmpeg_status.hardware.available_encoders is not empty %}
            <div class="ffmpeg-hardware-info">
              <strong>{{ 'Hardware Acceleration:'|t }}</strong>
              <span class="ffmpeg-hardware-info__gpu">{{ ffmpeg_status.hardware.gpu_name|default('N/A') }}</span>
              <div class="ffmpeg-hardware-info__encoders">
                {% for encoder in ffmpeg_status.hardware.available_encoders %}
                  <span class="ffmpeg-encoder-badge" aria-label="{{ 'Hardware encoder: @encoder'|t({'@encoder': encoder}) }}">{{ encoder }}</span>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>

      {# 4. Stats Cards — 6 Cards with data-stat #}
      {% if stats %}
        <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__stats-cards" id="ffmpeg-section-stats">
          <h3>{{ 'Conversion Statistics'|t }}</h3>
          <div class="ffmpeg-skeleton-group" aria-hidden="true">
            <div class="ffmpeg-skeleton-grid">
              {% for i in 1..6 %}
                <div class="ffmpeg-skeleton ffmpeg-skeleton--card"></div>
              {% endfor %}
            </div>
          </div>
          <div class="ffmpeg-skeleton-hide">
            {{ stats_cards }}
          </div>
        </div>
      {% endif %}

      {# 7. Active Conversions — Table with Progress Bars + Empty State #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__active" id="ffmpeg-section-active" data-active-conversions aria-live="polite" aria-atomic="true" aria-busy="false">
        <h3>{{ 'Active Conversions'|t }} <span class="ffmpeg-count-badge" data-active-count aria-label="{{ '@count active'|t({'@count': active_conversions.count}) }}">{{ active_conversions.count }}</span></h3>

        <div class="ffmpeg-skeleton-group" aria-hidden="true">
          {% for i in 1..3 %}
            <div class="ffmpeg-skeleton ffmpeg-skeleton--row"></div>
          {% endfor %}
        </div>

        <div class="ffmpeg-dashboard-table-wrapper ffmpeg-dashboard-table-wrapper--active{% if not active_conversions.has_items %} is-hidden{% endif %}" data-active-table>
          <table class="ffmpeg-dashboard-table ffmpeg-dashboard-table--active">
            <thead>
              <tr>
                <th scope="col">{{ 'Media'|t }}</th>
                <th scope="col">{{ 'Status'|t }}</th>
                <th scope="col">{{ 'Progress'|t }}</th>
                <th scope="col">{{ 'Current Step'|t }}</th>
                <th scope="col">{{ 'Duration'|t }}</th>
                <th scope="col">{{ 'Est. Remaining'|t }}</th>
              </tr>
            </thead>
            <tbody data-active-tbody>
              {% for conversion in active_conversions.items %}
                <tr data-media-id="{{ conversion.media_id }}" data-percent="{{ conversion.percent }}" data-status="{{ conversion.status }}" data-step="{{ conversion.current_step|default('-') }}">
                  <td>
                    {% if conversion.media_url %}
                      <a href="{{ conversion.media_url }}">{{ conversion.media_name }}</a>
                    {% else %}
                      {{ conversion.media_name }}
                    {% endif %}
                    <span class="ffmpeg-media-id">#{{ conversion.media_id }}</span>
                  </td>
                  <td>
                    <span class="status-badge status-badge--{{ conversion.status }}" aria-label="{{ 'Status: @status'|t({'@status': conversion.status_label}) }}">
                      {{ conversion.status_label }}
                    </span>
                  </td>
                  <td>
                    <div class="progress-bar"
                      role="progressbar"
                      aria-valuemin="0"
                      aria-valuemax="100"
                      aria-valuenow="{{ conversion.percent }}"
                      aria-valuetext="{{ conversion.percent }}%">
                      <div class="progress-bar__fill" style="width: {{ conversion.percent }}%" data-progress></div>
                      <span class="progress-bar__text" data-progress-text>{{ conversion.percent }}%</span>
                    </div>
                  </td>
                  <td class="ffmpeg-step-cell" data-step>{{ conversion.current_step|default('-') }}</td>
                  <td data-duration>{{ conversion.duration|default('-') }}</td>
                  <td data-remaining>{{ conversion.estimated_remaining|default('-') }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="ffmpeg-empty-state ffmpeg-empty-state--active{% if not active_conversions.has_items %} is-visible{% endif %}" data-active-empty aria-hidden="{% if active_conversions.has_items %}true{% else %}false{% endif %}">
          <p>{{ 'No active conversions at this time.'|t }}</p>
        </div>
      </div>

      {# Recent Conversions — directly after Active Conversions #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__recent" id="ffmpeg-section-recent">
        <h3>{{ 'Recent Conversions'|t }}</h3>

        <div class="ffmpeg-skeleton-group" aria-hidden="true">
          {% for i in 1..4 %}
            <div class="ffmpeg-skeleton ffmpeg-skeleton--row"></div>
          {% endfor %}
        </div>

        {% if recent_conversions.has_items %}
          <div class="ffmpeg-dashboard-table-wrapper ffmpeg-dashboard-table-wrapper--recent">
            <table class="ffmpeg-dashboard-table ffmpeg-dashboard-table--recent">
              <thead>
                <tr>
                  <th scope="col">{{ 'Media'|t }}</th>
                  <th scope="col">{{ 'Status'|t }}</th>
                  <th scope="col">{{ 'Completed'|t }}</th>
                  <th scope="col">{{ 'Duration'|t }}</th>
                </tr>
              </thead>
              <tbody>
                {% for conversion in recent_conversions.items %}
                  <tr>
                    <td>
                      {% if conversion.media_url %}
                        <a href="{{ conversion.media_url }}">{{ conversion.media_name }}</a>
                      {% else %}
                        {{ conversion.media_name }}
                      {% endif %}
                      <span class="ffmpeg-media-id">#{{ conversion.media_id }}</span>
                    </td>
                    <td>
                      {% set recent_status_text %}{% if conversion.status == 'completed' %}{{ 'Completed'|t }}{% elseif conversion.status == 'failed' %}{{ 'Failed'|t }}{% elseif conversion.status == 'pending' %}{{ 'Pending'|t }}{% elseif conversion.status == 'converting' or conversion.status == 'processing' %}{{ 'Processing'|t }}{% else %}{{ conversion.status }}{% endif %}{% endset %}
                      <span class="status-badge status-badge--{{ conversion.status }}" aria-label="{{ 'Status: @status'|t({'@status': recent_status_text|trim}) }}">
                        {{ recent_status_text|trim }}
                      </span>
                    </td>
                    <td>{{ conversion.completed_at_formatted|default('-') }}</td>
                    <td>{{ conversion.duration|default('-') }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="ffmpeg-empty-state">
            <p>{{ 'No recent conversions found.'|t }}</p>
          </div>
        {% endif %}
      </div>

      {# 5. Queue Status + Queue Editor — moved from sidebar #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__queue" id="ffmpeg-section-queue">
        <h3>{{ 'Queue Status'|t }}</h3>
        <div class="ffmpeg-skeleton-group" aria-hidden="true">
          <div class="ffmpeg-skeleton ffmpeg-skeleton--stat" style="margin-bottom: 0.75rem;"></div>
          <div class="ffmpeg-skeleton ffmpeg-skeleton--text"></div>
          <div class="ffmpeg-skeleton ffmpeg-skeleton--text-short"></div>
        </div>
        <div class="ffmpeg-skeleton-hide">
          {{ enhanced_queue_status }}
        </div>
      </div>

      {# 6. Last 24 Hours — moved from sidebar #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__24h-stats" id="ffmpeg-section-24h">
        <h3>{{ 'Last 24 Hours'|t }}</h3>
        <div class="ffmpeg-skeleton-group" aria-hidden="true">
          <div class="ffmpeg-skeleton ffmpeg-skeleton--stat" style="margin-bottom: 0.75rem;"></div>
          <div class="ffmpeg-skeleton ffmpeg-skeleton--text"></div>
          <div class="ffmpeg-skeleton ffmpeg-skeleton--text-short"></div>
        </div>
        <div class="ffmpeg-skeleton-hide">
          {% set completed_24h = stats.completed_24h|default(0) %}
          {% set failed_24h = stats.failed_24h|default(0) %}
          {% set total_24h = completed_24h + failed_24h %}
          {% if total_24h > 0 %}
            {% set completed_pct = ((completed_24h / total_24h) * 100)|round %}
            {% set failed_pct = 100 - completed_pct %}
            <div class="ffmpeg-24h-chart" role="img" aria-label="{{ '@completed completed, @failed failed in the last 24 hours'|t({'@completed': completed_24h, '@failed': failed_24h}) }}">
              <div class="ffmpeg-24h-chart__bar">
                <div class="ffmpeg-24h-chart__segment ffmpeg-24h-chart__segment--completed" style="width: {{ completed_pct }}%">
                  {% if completed_pct > 15 %}<span>{{ completed_24h }}</span>{% endif %}
                </div>
                <div class="ffmpeg-24h-chart__segment ffmpeg-24h-chart__segment--failed" style="width: {{ failed_pct }}%">
                  {% if failed_pct > 15 %}<span>{{ failed_24h }}</span>{% endif %}
                </div>
              </div>
              <div class="ffmpeg-24h-chart__legend">
                <span class="ffmpeg-24h-chart__legend-item ffmpeg-24h-chart__legend-item--completed">{{ 'Completed'|t }} ({{ completed_24h }})</span>
                <span class="ffmpeg-24h-chart__legend-item ffmpeg-24h-chart__legend-item--failed">{{ 'Failed'|t }} ({{ failed_24h }})</span>
              </div>
            </div>
          {% endif %}
          {{ stats_24h }}
        </div>
      </div>

      {# 7. Recent Failures #}
      <div class="ffmpeg-media-dashboard__section ffmpeg-media-dashboard__errors" id="ffmpeg-section-failures">
        <h3>{{ 'Recent Failures'|t }}
          {% if recent_failures.has_items %}
            <span class="ffmpeg-count-badge ffmpeg-count-badge--error" aria-label="{{ '@count failures'|t({'@count': recent_failures.count}) }}">{{ recent_failures.count }}</span>
          {% endif %}
        </h3>
        {% if recent_failures.has_items %}
          <div class="ffmpeg-dashboard-table-wrapper ffmpeg-dashboard-table-wrapper--errors" role="alert">
            <table class="ffmpeg-dashboard-table ffmpeg-dashboard-table--errors">
              <thead>
                <tr>
                  <th scope="col">{{ 'Media'|t }}</th>
                  <th scope="col">{{ 'Error'|t }}</th>
                  <th scope="col">{{ 'Failed At'|t }}</th>
                </tr>
              </thead>
              <tbody>
                {% for failure in recent_failures.items %}
                  <tr>
                    <td>
                      {% if failure.media_url %}
                        <a href="{{ failure.media_url }}">{{ failure.media_name }}</a>
                      {% else %}
                        {{ failure.media_name }}
                      {% endif %}
                      <span class="ffmpeg-media-id">#{{ failure.media_id }}</span>
                    </td>
                    <td class="ffmpeg-error-message">{% if failure.error_message %}<span title="{{ failure.error_message|e('html_attr') }}" aria-label="{{ failure.error_message|e('html_attr') }}">{{ failure.error_message|slice(0, 100) }}{% if failure.error_message|length > 100 %}&hellip;{% endif %}</span>{% else %}{{ 'Unknown error'|t }}{% endif %}</td>
                    <td>{{ failure.failed_at_formatted }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="ffmpeg-empty-state ffmpeg-empty-state--success">
            <p>{{ 'No recent failures. All conversions are running smoothly.'|t }}</p>
          </div>
        {% endif %}
      </div>
      {% endif %}

      {% if show_queue_editor %}
        <div data-ffmpeg-queue-editor></div>
      {% endif %}

      {# Video Media — Filter + Table + Pager #}
      <div class="ffmpeg-media-section" id="ffmpeg-section-media" data-ffmpeg-batch-container>
        <h2>{{ 'Video Media'|t }}</h2>
        {% if status_filter %}
          {{ status_filter }}
        {% endif %}
        {{ media_table }}
        {{ pager }}
      </div>

    </div>

    {# Right column: Sidebar — Quick Actions only #}
    <aside class="ffmpeg-dashboard-sidebar" id="ffmpeg-section-actions" role="complementary" aria-label="{{ 'Dashboard sidebar'|t }}">
      <div class="ffmpeg-quick-actions">
        <h3>{{ 'Quick Actions'|t }}</h3>
        {% if quick_actions %}
          <ul class="ffmpeg-action-list">
            {% for action in quick_actions %}
              <li>
                <a href="{{ action.url }}" class="ffmpeg-action-link">
                  {{ action.label }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="ffmpeg-empty-state__message">{{ 'No quick actions available for your current permissions.'|t }}</p>
        {% endif %}
      </div>
    </aside>

  </div>
</div>
