{% extends 'ops/base_ops.html' %}
{% load static %}
{% block title %}{{ zone.zone_code }} - Origin Zone - IXG Operations{% endblock %}

{% block extra_head %}
{% if show_zone_map %}
<link rel="stylesheet" href="{% static 'vendor/leaflet/leaflet.css' %}">
{% endif %}
{% endblock %}

{% block content %}

{% if messages %}
  {% for m in messages %}<div class="alert alert-{{ m.tags }} py-2">{{ m }}</div>{% endfor %}
{% endif %}

<div class="page-header d-flex justify-content-between align-items-center">
  <div>
    <h2>Origin zone {{ zone.zone_code }}</h2>
    <div class="text-secondary small">
      {{ zone.facility.name }}
      &middot; {{ zone.country }}{% if zone.region %} &middot; {{ zone.region }}{% endif %}
    </div>
  </div>
  <div>
    <a href="{% url 'ops:origin_zone_update' zone.pk %}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i> Edit zone</a>
    <a href="{% url 'ops:origin_zone_list' %}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back</a>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-7">
    {% if show_zone_map %}
    <div class="stat-card">
      <h6 class="mb-3"><i class="bi bi-geo-alt"></i> Area on a map</h6>
      {% if zone_has_geometry %}
        <div id="zone-map" data-geometry="{{ zone_geometry_json }}" data-tile-url="{{ tile_url }}"
             style="height:420px;border:1px solid #cbd5e1;border-radius:.375rem;background:#eef2f5"></div>
        <p class="small text-secondary mt-2 mb-0">
          Drawn from the stored polygon. A view, not a check: it does not validate
          the geometry and it does not verify the zone.
        </p>
      {% else %}
        <div class="text-center text-secondary py-5" style="border:1px dashed #cbd5e1;border-radius:.375rem;background:#eef2f5">
          <i class="bi bi-map" style="font-size:2rem"></i>
          <p class="small mt-2 mb-0">
            No polygon coordinates are stored for this zone yet, so there is nothing
            to draw. Edit the zone, paste GeoJSON into the Geometry field and save,
            and the area appears here.
          </p>
        </div>
        <p class="small text-secondary mt-2 mb-0">
          A view, not a check: it does not validate the geometry and it does not
          verify the zone.
        </p>
      {% endif %}
    </div>
    {% endif %}
  </div>

  <div class="col-lg-5">
    <div class="stat-card">
      <h6 class="mb-3"><i class="bi bi-clipboard-data"></i> Zone record</h6>
      <table class="table table-sm table-borderless mb-0">
        <tr>
          <td class="text-secondary">Facility</td>
          <td>{{ zone.facility.name }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Verification</td>
          <td>
            {% if zone.verification_status == 'verified' %}
              <span class="badge bg-success badge-status">{{ zone.get_verification_status_display }}</span>
            {% elif zone.verification_status == 'rejected' %}
              <span class="badge bg-danger badge-status">{{ zone.get_verification_status_display }}</span>
            {% else %}
              <span class="badge bg-warning text-dark badge-status">{{ zone.get_verification_status_display }}</span>
            {% endif %}
          </td>
        </tr>
        <tr>
          <td class="text-secondary">Verified by</td>
          <td>
            {% if zone.verified_by %}
              {{ zone.verified_by.full_name|default:zone.verified_by.email }}
            {% else %}-{% endif %}
          </td>
        </tr>
        <tr>
          <td class="text-secondary">Verified on</td>
          <td>{{ zone.verified_at|date:'d/m/Y H:i'|default:'-' }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Coordinate source</td>
          <td>{{ zone.coordinate_source|default:'-' }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Collected by</td>
          <td>{{ zone.coordinates_collected_by|default:'-' }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Collected on</td>
          <td>{{ zone.coordinates_collected_at|date:'d/m/Y'|default:'-' }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Supporting file</td>
          <td>{{ zone.evidence_file|default:'-' }}</td>
        </tr>
        <tr>
          <td class="text-secondary">Registered</td>
          <td>{{ zone.created_at|date:'d/m/Y' }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
{% if show_zone_map and zone_has_geometry %}
<script src="{% static 'vendor/leaflet/leaflet.js' %}"></script>
<script src="{% static 'js/ixg_zone_map.js' %}"></script>
{% endif %}
{% endblock %}