{% extends 'ops/base_ops.html' %}
{% load static %}
{% block title %}{{ page_title }} - IXG Operations{% endblock %}

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

{% block content %}

<div class="page-header d-flex justify-content-between align-items-center">
  <h2>{{ page_title }}</h2>
  <a href="{{ cancel_url }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

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

<div class="row g-3">
  <div class="col-md-7">
    <div class="stat-card">
      <form method="post" novalidate>
        {% csrf_token %}

        {% if form.non_field_errors %}
          {% for e in form.non_field_errors %}<div class="alert alert-danger py-2">{{ e }}</div>{% endfor %}
        {% endif %}

        {% for field in form %}
        <div class="mb-3">
          {% if field.field.widget.input_type == 'checkbox' %}
            <div class="form-check">
              {{ field }}
              <label class="form-check-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            </div>
          {% else %}
            <label class="form-label" for="{{ field.id_for_label }}">
              {{ field.label }}{% if field.field.required %} <span class="text-danger">*</span>{% endif %}
            </label>
            {{ field }}
          {% endif %}
          {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
          {% for e in field.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
        </div>
        {% endfor %}

        <button type="submit" class="btn btn-primary">{{ submit_label }}</button>
        <a href="{{ cancel_url }}" class="btn btn-outline-secondary">Cancel</a>
      </form>
    </div>
  </div>

  <div class="col-md-5">
    {% if case %}
    <div class="stat-card mb-3">
      <h6 class="mb-3"><i class="bi bi-shield-check"></i> Due-diligence case</h6>
      <p class="small mb-1">Batch <strong>{{ case.batch.batch_reference }}</strong></p>
      <p class="small mb-0 text-secondary">Status: {{ case.get_status_display }}</p>
    </div>
    {% endif %}

    {% 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:340px;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 %}
        <p class="small text-secondary mb-0">
          No polygon coordinates are stored for this zone yet, so there is nothing
          to draw. Paste GeoJSON into the Geometry field and save, and the area
          appears here. A view, not a check: it does not validate the geometry and
          it does not verify the zone.
        </p>
      {% endif %}
    </div>
    {% endif %}
  </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 %}