{% extends 'generic/object.html' %}

{% block content %}
<div class="row gx-3">
  {# ================= LEFT COLUMN ================= #}
  <div class="col-12 col-xl-6">

    {# --- Image panel --- #}
    <div class="card mb-3">
      <h5 class="card-header">Image</h5>
      <div class="card-body">

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Name</div>
          <div class="col col-md-9">{{ object.name }}</div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Registry</div>
          <div class="col col-md-9">{{ object.registry }}</div>
        </div>

        <div class="row mb-2">
          <div class="col col-md-3 text-muted">Default Tag</div>
          <div class="col col-md-9">
            {% if object.default_tag %}{{ object.default_tag }}{% else %}<span class="text-muted">—</span>{% endif %}
          </div>
        </div>

      </div>
    </div>

    <div class="mb-3">
      {% include 'inc/panels/tags.html' %}
    </div>
    {% include 'inc/panels/comments.html' %}
  </div>

  {# ================= RIGHT COLUMN ================= #}
  <div class="col-12 col-xl-6">

    {# --- Image Tags panel --- #}
    <div class="card mb-3">
  <h5 class="card-header">
    Image Tags
  </h5>

  <div class="card-body">
    {% if object.image_tags.exists %}
      <div class="table-responsive">
        <table class="table table-hover table-headings">
          <thead>
            <tr>
              <th>Tag</th>
              <th>OS</th>
              <th>Arch</th>
              <th>Size</th>
              <th>Digest</th>
            </tr>
          </thead>
          <tbody>
            {% for t in object.image_tags.all|dictsort:"image_tag" %}
              <tr>
                <td class="fw-semibold">
                  {{ t.image_tag|default:"latest" }}
                </td>

                <td>
                  {% if t.os %}
                    <span class="badge text-bg-primary rounded-pill">{{ t.get_os_display }}</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>

                <td>
                  {% if t.arch %}
                    <span class="badge text-bg-secondary rounded-pill">{{ t.get_arch_display }}</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>

                <td>
                  {% if t.size %}
                    {{ t.size|filesizeformat }}
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>

                <td>
                  {% if t.digest %}
                    <span title="{{ t.digest }}">
                      {{ t.digest|slice:":12" }}…{{ t.digest|slice:"-5:" }}
                    </span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <span class="text-muted">No tags defined for this image.</span>
    {% endif %}
  </div>
</div>

  </div>
</div>
{% endblock %}