{# Live Streams Partial (Bootstrap 5) #}

{# Optional: include once in a parent layout if you reuse this partial often #}
<style>
  .pulse-dot {
    width: .75rem; height: .75rem; border-radius: 9999px;
    display: inline-block; animation: pulse-dot 2s infinite;
  }
  @keyframes pulse-dot {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }
</style>

{% if active_sessions %}
  <div class="d-flex flex-column gap-3">
    {% for session in active_sessions %}
      <div class="border rounded p-3 bg-white shadow-sm">
        <div class="d-flex align-items-start justify-content-between">
          <div class="d-flex align-items-center">
            {# Status indicator #}
            <span
              class="pulse-dot me-3"
              style="
                background:
                  {% if session.status == 'active' %}#22c55e
                  {% elif session.status == 'processing' %}#eab308
                  {% else %}#9ca3af{% endif %};
              ">
            </span>

            {# Stream info #}
            <div>
              <h4 class="h6 mb-0">{{ session.channel.name }}</h4>
              <div class="text-muted small">
                {% if session.started_at %}
                  Started {{ session.started_at|timesince }} ago
                {% else %}
                  Starting...
                {% endif %}
              </div>
            </div>
          </div>

          {# Stream stats #}
          <div class="d-flex align-items-center gap-4 text-muted small">
            <div class="text-center">
              <div class="fw-semibold text-dark">{{ session.segments_processed }}</div>
              <div>Segments</div>
            </div>
            {% if session.errors_count > 0 %}
              <div class="text-center">
                <div class="fw-semibold text-danger">{{ session.errors_count }}</div>
                <div>Errors</div>
              </div>
            {% endif %}
          </div>
        </div>

        {# Configuration badges + actions #}
        <div class="d-flex align-items-center justify-content-between mt-3">
          <div class="d-flex align-items-center gap-2">
            {% if session.video_config %}
              <span class="badge rounded-pill bg-primary-subtle text-primary">
                <i class="fas fa-video me-1"></i>{{ session.video_config.resolution }}
              </span>
            {% endif %}
            {% if session.audio_config %}
              <span class="badge rounded-pill bg-success-subtle text-success">
                <i class="fas fa-volume-up me-1"></i>{{ session.audio_config.bitrate }}
              </span>
            {% endif %}
          </div>

          <div class="d-inline-flex align-items-center gap-2">
            <a href="{% url 'streams:session_detail' session.id %}"
               class="text-primary text-decoration-none" title="View">
              <i class="fas fa-eye"></i>
            </a>

            {% if session.status == 'active' %}
              <form method="post" action="{% url 'streams:session_stop' session.id %}" class="d-inline">
                {% csrf_token %}
                <button type="submit"
                        class="btn btn-link p-0 text-danger text-decoration-none"
                        hx-post="{% url 'streams:session_stop' session.id %}"
                        hx-confirm="Are you sure you want to stop this stream?"
                        hx-target="#live-streams-container">
                  <i class="fas fa-stop"></i>
                </button>
              </form>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% else %}
  <div class="text-center py-5">
    <div class="rounded-circle d-inline-flex align-items-center justify-content-center bg-light mb-3" style="width:64px;height:64px;">
      <i class="fas fa-stream text-muted fs-4"></i>
    </div>
    <h3 class="h6 fw-semibold mb-1">No active streams</h3>
    <p class="text-muted small mb-3">Start a new stream to begin processing</p>
    <a href="{% url 'streams:channel_list' %}" class="btn btn-primary">
      <i class="fas fa-plus me-2"></i>Start Stream
    </a>
  </div>
{% endif %}