{% extends "base.html" %}

{% block title %}{{ plan.name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/setup-plans" class="hover:underline">Rüstpläne</a> / {{ plan.name }}</p>{% endblock %}
{% block heading %}{{ plan.name }}{% endblock %}

{% block content %}
<div class="grid grid-cols-3 gap-4 max-w-5xl">
  {# Linke Spalte: Plan-Header + Steps #}
  <div class="col-span-2 space-y-4">
    <form method="post" action="/setup-plans/{{ plan.id }}/edit" class="card" id="plan-edit-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token if csrf_token is defined and csrf_token else '' }}">
      <script>
        (function () {
          var f = document.getElementById('plan-edit-form');
          var inp = f && f.querySelector('input[name="csrf_token"]');
          if (inp && !inp.value) {
            inp.value = (document.cookie.split('; ').find(function (r) { return r.startsWith('csrf_token='); }) || '=').split('=')[1] || '';
          }
        })();
      </script>
      <div class="card-header"><div>
        <h2>Plan-Daten</h2>
        <p class="sub">Bauteil: <strong>{{ plan.item_ident }}</strong>{% if plan.item_description %} · {{ plan.item_description[:60] }}{% endif %}</p>
      </div></div>
      <div class="p-5 space-y-5">
        {# === Stammdaten === #}
        <div class="grid grid-cols-2 gap-x-6 gap-y-4">
          <div class="col-span-2">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Plan-Name</label>
            <input type="text" name="name" value="{{ plan.name }}" required class="input mt-1 w-full">
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Maschine</label>
            <select name="machine_id" class="select mt-1 w-full">
              <option value="">— allgemein gültig —</option>
              {% for m in machines %}
              <option value="{{ m.id }}" {% if m.id == plan.machine_id %}selected{% endif %}>{{ m.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zeichnungs-Revision</label>
            <input type="text" name="revision" value="{{ plan.revision or '' }}" class="input mt-1 w-full">
          </div>
          <div class="col-span-2">
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">NC-Programm-Name</label>
            <input type="text" name="nc_program" value="{{ plan.nc_program or '' }}" class="input mt-1 w-full">
          </div>
        </div>

        {# === Werkstück === #}
        <div class="pt-4 border-t" style="border-color: var(--card-border-2);">
          <h3 class="text-[11px] uppercase tracking-wider font-bold text-neutral-400 mb-3">Werkstück</h3>
          <div class="grid grid-cols-3 gap-x-6 gap-y-4">
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstoff</label>
              <input type="text" name="material" value="{{ plan.material or '' }}" class="input mt-1 w-full">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rohteil-Maße</label>
              <input type="text" name="raw_dimensions" value="{{ plan.raw_dimensions or '' }}" class="input mt-1 w-full">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Fertigteil-Maße</label>
              <input type="text" name="finished_dimensions" value="{{ plan.finished_dimensions or '' }}" class="input mt-1 w-full">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stk je Aufspannung</label>
              <input type="number" name="pieces_per_setup" value="{{ plan.pieces_per_setup or 1 }}" min="1" class="input mt-1 w-full nums">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rüstzeit (Min)</label>
              <input type="number" name="est_minutes" value="{{ plan.est_minutes }}" min="1" class="input mt-1 w-full nums">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Min/Stk Bearbeitung</label>
              <input type="number" name="minutes_per_piece" value="{{ plan.minutes_per_piece or 0 }}" min="0" step="0.1" class="input mt-1 w-full nums">
            </div>
          </div>
        </div>

        {# === Spannmittel === #}
        <div class="pt-4 border-t" style="border-color: var(--card-border-2);">
          <h3 class="text-[11px] uppercase tracking-wider font-bold text-neutral-400 mb-3">Spannmittel &amp; Nullpunkt</h3>
          <div class="grid grid-cols-3 gap-x-6 gap-y-4">
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Spannmittel-Art</label>
              <input type="text" name="clamping_type" value="{{ plan.clamping_type or '' }}" class="input mt-1 w-full" list="clamp-list">
              <datalist id="clamp-list">
                <option>Schraubstock</option><option>3-Backen-Futter</option><option>4-Backen-Futter</option>
                <option>Spannzange</option><option>Magnet-Spannplatte</option><option>Vakuum-Spannplatte</option>
                <option>Spann-Vorrichtung (Sonder)</option>
              </datalist>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Backen / Größe</label>
              <input type="text" name="clamping_size" value="{{ plan.clamping_size or '' }}" class="input mt-1 w-full">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Anziehmoment (Nm)</label>
              <input type="number" name="clamping_torque_nm" value="{{ plan.clamping_torque_nm or '' }}" min="0" step="1" class="input mt-1 w-full nums">
            </div>
            <div class="col-span-3">
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstück-Nullpunkt</label>
              <input type="text" name="zero_point" value="{{ plan.zero_point or '' }}" class="input mt-1 w-full">
            </div>
          </div>
        </div>

        {# === Qualität === #}
        <div class="pt-4 border-t" style="border-color: var(--card-border-2);">
          <h3 class="text-[11px] uppercase tracking-wider font-bold text-neutral-400 mb-3">Qualität &amp; Prüfung</h3>
          <div class="grid grid-cols-2 gap-x-6 gap-y-4">
            <div class="col-span-2">
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Toleranz-Norm</label>
              <input type="text" name="tolerances" value="{{ plan.tolerances or '' }}" class="input mt-1 w-full">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüfmaße</label>
              <textarea name="inspection_dimensions" rows="3" class="input mt-1 w-full">{{ plan.inspection_dimensions or '' }}</textarea>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüfmittel</label>
              <textarea name="inspection_tools" rows="3" class="input mt-1 w-full">{{ plan.inspection_tools or '' }}</textarea>
            </div>
            <div class="col-span-2">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="first_article" value="1" {% if plan.first_article %}checked{% endif %}>
                <span class="text-sm">Erstmusterprüfung Pflicht</span>
              </label>
            </div>
          </div>
        </div>

        {# === Betriebsmittel === #}
        <div class="pt-4 border-t" style="border-color: var(--card-border-2);">
          <h3 class="text-[11px] uppercase tracking-wider font-bold text-neutral-400 mb-3">Betriebsmittel &amp; Sicherheit</h3>
          <div class="grid grid-cols-2 gap-x-6 gap-y-4">
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kühlmittel</label>
              <input type="text" name="coolant" value="{{ plan.coolant or '' }}" class="input mt-1 w-full" list="coolant-list">
              <datalist id="coolant-list">
                <option>Emulsion (Standard)</option><option>MMS</option><option>Trocken</option>
                <option>Druckluft</option><option>Innenkühlung</option><option>Schneidöl</option>
              </datalist>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz</label>
              <input type="text" name="note" value="{{ plan.note or '' }}" class="input mt-1 w-full">
            </div>
            <div class="col-span-2">
              <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sicherheits-Hinweise / PSA</label>
              <textarea name="safety_notes" rows="2" class="input mt-1 w-full">{{ plan.safety_notes or '' }}</textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="px-5 py-3 border-t flex justify-end" style="border-color: var(--card-border-2);">
        <button class="btn btn-primary" type="submit">Plan-Daten speichern</button>
      </div>
    </form>

    {# Steps-Liste #}
    <div class="card">
      <div class="card-header"><div>
        <h2>Rüst-Schritte ({{ plan.steps|length }})</h2>
        <p class="sub">Reihenfolge laut seq · Summe geplante Zeit:
          {% set sum_min = plan.steps | sum(attribute='est_minutes') %}
          <strong class="nums">{{ sum_min }} min</strong>
          {% if sum_min != plan.est_minutes %} <span class="text-[10px] text-amber-600">⚠ weicht von Plan-Rüstzeit {{ plan.est_minutes }} min ab</span>{% endif %}
        </p>
      </div></div>
      <table class="data-table" style="width:100%;font-size:13px;">
        <thead>
          <tr>
            <th style="width:50px;">#</th>
            <th>Aktion</th>
            <th>Detail</th>
            <th>Werkzeug / Slot</th>
            <th class="text-right">Zeit</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for s in plan.steps %}
          <tr>
            <td class="nums">{{ loop.index }}</td>
            <td>
              {% set ico, label = ACTION_LABELS.get(s.action, ('📝', s.action)) %}
              <span style="font-size:18px;">{{ ico }}</span> {{ label }}
            </td>
            <td>{{ s.detail or '—' }}</td>
            <td style="font-size:12px;">
              {% if s.tool_name %}<strong>{{ s.tool_name }}</strong>{% endif %}
              {% if s.slot_no %}<div class="text-[11px] text-neutral-500">Slot {{ s.slot_no }}</div>{% endif %}
              {% if not s.tool_name and not s.slot_no %}—{% endif %}
            </td>
            <td class="text-right nums">{{ s.est_minutes }} min</td>
            <td>
              <form method="post" action="/setup-plans/{{ plan.id }}/steps/{{ s.id }}/delete" style="display:inline;"
                    onsubmit="return confirm('Schritt wirklich löschen?')">
                <button class="btn btn-sm btn-secondary" style="color:#b91c1c;">✕</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" style="padding:30px;text-align:center;color:var(--card-text-muted);">
            Noch keine Schritte. Erste hinzufügen unten ↓
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {# Step hinzufügen #}
    <form method="post" action="/setup-plans/{{ plan.id }}/steps/add" class="card">
      <div class="card-header"><h2>+ Schritt hinzufügen</h2></div>
      <div class="p-5 grid grid-cols-3 gap-3">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aktion *</label>
          <select name="action" required class="select mt-1 w-full">
            {% for code, (ico, label) in ACTION_LABELS.items() %}
            <option value="{{ code }}">{{ ico }} {{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkzeug (opt.)</label>
          <select name="tool_id" class="select mt-1 w-full">
            <option value="">— keins —</option>
            {% for t in tools %}
            <option value="{{ t.id }}">{{ t.name }}{% if t.tool_type %} ({{ t.tool_type }}){% endif %}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Slot-Nr (opt.)</label>
          <input type="number" name="slot_no" min="1" class="input mt-1 w-full nums">
        </div>
        <div class="col-span-2">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Detail</label>
          <input type="text" name="detail" class="input mt-1 w-full"
                 placeholder="z.B. „Schraubstock 80mm Backe, 800 N·m Drehmoment"">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zeit (Min)</label>
          <input type="number" name="est_minutes" value="5" min="1" class="input mt-1 w-full nums">
        </div>
      </div>
      <div class="px-5 py-3 border-t flex justify-end" style="border-color: var(--card-border-2);">
        <button class="btn btn-primary" type="submit">+ Schritt hinzufügen</button>
      </div>
    </form>
  </div>

  {# Rechte Spalte: Sidebar mit Aktionen #}
  <div class="space-y-4">
    <div class="card">
      <div class="card-header"><h2>Plan-Info</h2></div>
      <div class="p-4 text-sm space-y-2">
        <div><span class="text-neutral-500 text-[11px]">Bauteil</span><br>
          {% if plan.item_id %}
            <a href="/items/{{ plan.item_id }}" class="hover:underline" style="color:#f2581b;">
              <strong>{{ plan.item_ident }}</strong>
            </a>
          {% else %}
            <strong>{{ plan.item_ident }}</strong>
          {% endif %}
        </div>
        <div><span class="text-neutral-500 text-[11px]">Maschine</span><br>{{ plan.machine_name or '— allgemein —' }}</div>
        <div><span class="text-neutral-500 text-[11px]">Erstellt</span><br>{{ plan.created_at[:16] }}</div>
        {% if plan.updated_at %}<div><span class="text-neutral-500 text-[11px]">Geändert</span><br>{{ plan.updated_at[:16] }}</div>{% endif %}
      </div>
    </div>

    {# ============== BAUTEIL-INFOS (Werkstoff aus Plan, Bestand+Lagerort aus Item) ============== #}
    {% if item_full or plan.material %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Bauteil-Daten</h2>
        <p class="sub">{{ (item_full.description if item_full else '') or '—' }}</p>
      </div></div>
      <div class="p-4 text-sm space-y-2">
        {% if plan.material %}
        <div><span class="text-neutral-500 text-[11px]">Werkstoff</span><br><strong>{{ plan.material }}</strong></div>
        {% endif %}
        {% if plan.raw_dimensions %}
        <div><span class="text-neutral-500 text-[11px]">Rohteil-Maße</span><br>{{ plan.raw_dimensions }}</div>
        {% endif %}
        {% if plan.finished_dimensions %}
        <div><span class="text-neutral-500 text-[11px]">Fertigteil-Maße</span><br>{{ plan.finished_dimensions }}</div>
        {% endif %}
        {% if item_full %}
        {% if item_full.location %}
        <div><span class="text-neutral-500 text-[11px]">Lagerort</span><br>{{ item_full.location }}</div>
        {% endif %}
        <div><span class="text-neutral-500 text-[11px]">Bestand</span><br>
          <strong class="nums">{{ item_full.quantity_total or 0 }}</strong>
          {% if item_full.quantity_min %}
            <span class="text-[11px] text-neutral-500">(Min: {{ item_full.quantity_min }})</span>
          {% endif %}
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {# ============== CNC-BEDINGUNGEN (Spannmittel, NC, Toleranzen, Kühlmittel) ============== #}
    {% if plan.clamping_type or plan.nc_program or plan.tolerances or plan.coolant or plan.zero_point %}
    <div class="card" style="border-left: 3px solid #f59e0b;">
      <div class="card-header"><div><h2>CNC-Bedingungen</h2></div></div>
      <div class="p-4 text-sm space-y-2">
        {% if plan.clamping_type %}
        <div><span class="text-neutral-500 text-[11px]">Spannmittel</span><br><strong>{{ plan.clamping_type }}</strong>
          {% if plan.clamping_size %} · {{ plan.clamping_size }}{% endif %}
          {% if plan.clamping_torque_nm %} · {{ plan.clamping_torque_nm }} Nm{% endif %}
        </div>
        {% endif %}
        {% if plan.zero_point %}
        <div><span class="text-neutral-500 text-[11px]">Werkstück-Nullpunkt</span><br>{{ plan.zero_point }}</div>
        {% endif %}
        {% if plan.nc_program %}
        <div><span class="text-neutral-500 text-[11px]">NC-Programm</span><br><code style="font-size:11px;">{{ plan.nc_program }}</code></div>
        {% endif %}
        {% if plan.tolerances %}
        <div><span class="text-neutral-500 text-[11px]">Toleranz-Norm</span><br>{{ plan.tolerances }}</div>
        {% endif %}
        {% if plan.coolant %}
        <div><span class="text-neutral-500 text-[11px]">Kühlmittel</span><br>{{ plan.coolant }}</div>
        {% endif %}
        {% if plan.first_article %}
        <div style="background:rgba(245,158,11,0.10);padding:6px 10px;border-radius:6px;border:1px solid rgba(245,158,11,0.30);">
          ⚠ <strong>Erstmusterprüfung Pflicht</strong> vor Serie
        </div>
        {% endif %}
        {% if plan.revision %}
        <div><span class="text-neutral-500 text-[11px]">Zeichnungs-Rev.</span><br>{{ plan.revision }}</div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {# ============== PRÜFUNG (multiline) ============== #}
    {% if plan.inspection_dimensions or plan.inspection_tools %}
    <div class="card">
      <div class="card-header"><div><h2>Prüfung</h2></div></div>
      <div class="p-4 text-sm space-y-3">
        {% if plan.inspection_dimensions %}
        <div>
          <span class="text-neutral-500 text-[11px]">Prüfmaße</span>
          <pre style="white-space:pre-wrap;font-size:12px;margin:4px 0;">{{ plan.inspection_dimensions }}</pre>
        </div>
        {% endif %}
        {% if plan.inspection_tools %}
        <div>
          <span class="text-neutral-500 text-[11px]">Prüfmittel</span>
          <pre style="white-space:pre-wrap;font-size:12px;margin:4px 0;">{{ plan.inspection_tools }}</pre>
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {# ============== SICHERHEIT ============== #}
    {% if plan.safety_notes %}
    <div class="card" style="border-left: 3px solid #ef4444;">
      <div class="card-header"><div><h2>⚠ Sicherheit / PSA</h2></div></div>
      <div class="p-4 text-sm">
        <pre style="white-space:pre-wrap;font-size:12px;margin:0;">{{ plan.safety_notes }}</pre>
      </div>
    </div>
    {% endif %}

    {# ============== ZEICHNUNGEN & ANHÄNGE ============== #}
    {% if item_attachments %}
    <div class="card">
      <div class="card-header"><div>
        <h2>📐 Zeichnungen / Anhänge</h2>
        <p class="sub">{{ item_attachments|length }} Datei(en) am Bauteil</p>
      </div></div>
      <div class="p-4 text-sm space-y-2">
        {% for a in item_attachments %}
        <a href="/attachments/{{ a.id }}/download" target="_blank"
           class="flex items-center gap-2 p-2 rounded hover:bg-neutral-800/50 transition"
           style="border:1px solid rgba(255,255,255,0.08);">
          <span style="font-size:18px;">
            {% if 'pdf' in (a.mime_type or '') %}📄
            {% elif 'image' in (a.mime_type or '') %}🖼
            {% elif 'dxf' in (a.filename or '')|lower or 'dwg' in (a.filename or '')|lower %}📐
            {% else %}📎{% endif %}
          </span>
          <div style="flex:1;min-width:0;">
            <div style="font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
              {{ a.filename }}
            </div>
            <div class="text-[10px] text-neutral-500">
              {{ (a.file_size / 1024)|round(0)|int }} KB · {{ a.uploaded_at[:10] if a.uploaded_at else '' }}
            </div>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {# ============== AKTIVE AUFTRÄGE MIT DIESEM PLAN ============== #}
    {% if linked_jobs %}
    <div class="card" style="border-left: 3px solid #f2581b;">
      <div class="card-header"><div>
        <h2>🏭 Aktive Aufträge</h2>
        <p class="sub">{{ linked_jobs|length }} Job(s) nutzen diesen Plan</p>
      </div></div>
      <div class="p-2 space-y-1">
        {% for j in linked_jobs %}
        <a href="/sales-orders/{{ j.order_id }}" class="block p-3 rounded hover:bg-neutral-800/50 transition"
           style="border:1px solid rgba(255,255,255,0.06); text-decoration:none; color:inherit;">
          <div class="flex items-center justify-between gap-2">
            <div style="flex:1;min-width:0;">
              <div style="font-size:12px;font-weight:700;color:#f2581b;">
                {{ j.order_no or 'AUF-?'  }}
              </div>
              <div style="font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                {{ j.customer or 'Kunde unbekannt' }}
              </div>
            </div>
            <div style="text-align:right;">
              <div class="nums" style="font-size:14px;font-weight:700;">{{ j.qty }} Stk</div>
              {% if j.due_date %}
              <div class="text-[10px] text-neutral-500">→ {{ j.due_date[:10] }}</div>
              {% endif %}
            </div>
          </div>
          <div class="flex items-center gap-2 mt-2 text-[10px]">
            <span class="badge badge-{% if j.status == 'running' %}emerald{% elif j.status == 'released' %}amber{% else %}neutral{% endif %}">
              {{ j.status }}
            </span>
            {% if j.machine_name %}
              <span class="text-neutral-500">{{ j.machine_name }}</span>
            {% endif %}
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {# ============== MATERIAL-CHARGEN (Rückverfolgbarkeit) ============== #}
    {% if item_lots %}
    <div class="card">
      <div class="card-header"><div>
        <h2>📦 Material-Chargen</h2>
        <p class="sub">Aktuelle Wareneingänge für dieses Bauteil</p>
      </div></div>
      <div class="p-4 text-sm space-y-2">
        {% for l in item_lots %}
        <div style="border-bottom:1px solid rgba(255,255,255,0.06); padding-bottom:6px;">
          <div style="font-size:12px;font-weight:600;">Charge: {{ l.charge or l.lot_number }}</div>
          <div class="text-[11px] text-neutral-500">
            {{ l.supplier or '—' }}{% if l.received_at %} · {{ l.received_at[:10] }}{% endif %}
          </div>
          <div class="text-[11px]">Menge: <strong class="nums">{{ l.quantity or 0 }}</strong></div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <div class="card">
      <div class="card-header"><h2>Verwendung</h2></div>
      <div class="p-4 text-sm">
        <p class="text-[12px] text-neutral-600">
          Dieser Rüstplan wird im <strong>Shopfloor</strong> angezeigt
          wenn ein Bediener einen Job für dieses Bauteil auf
          {% if plan.machine_name %}der Maschine <strong>{{ plan.machine_name }}</strong>{% else %}irgendeiner Maschine{% endif %}
          startet.
        </p>
      </div>
    </div>
    <form method="post" action="/setup-plans/{{ plan.id }}/delete"
          onsubmit="return confirm('Rüstplan inkl. aller Schritte löschen?')">
      <input type="hidden" name="csrf_token" value="{{ csrf_token if csrf_token is defined and csrf_token else '' }}">
      <button class="btn btn-secondary w-full" style="color:#b91c1c;">✕ Plan löschen</button>
    </form>
  </div>
</div>
{% endblock %}