{% extends "admin/change_form.html" %}
{% load i18n %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .latest-snapshot__header {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      justify-content: space-between;
    }

    .latest-snapshot__details {
      flex: 1 1 auto;
      min-width: 0;
    }

    .latest-snapshot__actions {
      flex: 0 0 auto;
      text-align: right;
    }

    .latest-snapshot__button {
      transform: scale(1.4);
      transform-origin: right center;
    }

    .mjpeg-streams__table {
      width: 100%;
      border-collapse: collapse;
    }

    .mjpeg-streams__table th,
    .mjpeg-streams__table td {
      padding: 0.35rem 0.5rem;
      text-align: left;
      border-bottom: 1px solid var(--hairline-color);
    }
  </style>
{% endblock %}

{% block after_field_sets %}
  {{ block.super }}
  {% if original %}
    <fieldset class="module aligned">
      <h2>{% trans "LATEST" %}</h2>
      <div class="form-row latest-snapshot__header">
        <div class="latest-snapshot__details">
          <div>
            <strong>{% trans "Captured" %}:</strong>
            {% if latest_snapshot %}
              {{ latest_snapshot.captured_at|date:"DATETIME_FORMAT" }}
            {% else %}
              <em>{% trans "Not captured" %}</em>
            {% endif %}
          </div>
          <div>
            <strong>{% trans "Resolution" %}:</strong>
            {% if latest_snapshot and latest_snapshot.resolution_display %}
              {{ latest_snapshot.resolution_display }}
            {% else %}
              <em>{% trans "Unknown" %}</em>
            {% endif %}
          </div>
          <div>
            <strong>{% trans "Format" %}:</strong>
            {% if latest_snapshot and latest_snapshot.image_format %}
              {{ latest_snapshot.image_format }}
            {% else %}
              <em>{% trans "Unknown" %}</em>
            {% endif %}
          </div>
          <div>
            <strong>{% trans "Content Sample" %}:</strong>
            {% if latest_snapshot_sample_url %}
              <a href="{{ latest_snapshot_sample_url }}">{% trans "View sample" %}</a>
            {% else %}
              <em>{% trans "Unavailable" %}</em>
            {% endif %}
          </div>
        </div>
        <div class="latest-snapshot__actions">
          <button
            type="submit"
            class="button latest-snapshot__button"
            formaction="{% url 'admin:video_videodevice_actions' pk=original.pk tool='refresh_snapshot' %}"
            formmethod="post"
          >
            {% trans "Snapshot" %}
          </button>
        </div>
      </div>
      <div class="form-row">
        {% if latest_snapshot %}
          {% with preview=latest_snapshot.get_data_uri %}
            {% if preview %}
              <img src="{{ preview }}" alt="{% trans 'Latest snapshot' %}" style="max-width: 100%; height: auto;" />
            {% else %}
              <em>{% trans "Snapshot unavailable" %}</em>
            {% endif %}
          {% endwith %}
        {% else %}
          <em>{% trans "Snapshot unavailable" %}</em>
        {% endif %}
      </div>
    </fieldset>
    <fieldset class="module aligned">
      <h2>{% trans "MJPEG Streams" %}</h2>
      {% if mjpeg_streams %}
        <table class="mjpeg-streams__table">
          <thead>
            <tr>
              <th scope="col">{% trans "Stream" %}</th>
              <th scope="col">{% trans "Last snapshot" %}</th>
              <th scope="col">{% trans "Public URL" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in mjpeg_streams %}
              <tr>
                <td>
                  <a href="{{ entry.admin_url }}">{{ entry.stream.name }}</a>
                </td>
                <td>
                  {% if entry.last_snapshot_at %}
                    {{ entry.last_snapshot_at|date:"DATETIME_FORMAT" }}
                  {% else %}
                    <em>{% trans "Never" %}</em>
                  {% endif %}
                </td>
                <td>
                  <a href="{{ entry.public_url }}" target="_blank" rel="noopener">
                    {{ entry.public_url }}
                  </a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <em>{% trans "No MJPEG streams are configured for this device." %}</em>
      {% endif %}
    </fieldset>
  {% endif %}
{% endblock %}