{% extends "base.html" %}

{% block title %}Detail {{ allocation.cidr }} | IP Subnet Allocator{% endblock %}

{% block content %}
<div id="flash-container">
  {% include "fragments/flash.html" %}
</div>

<section class="box">
  <div class="box-title">Detail alokace {{ allocation.cidr }}</div>

  <div class="detail-grid">
    <div class="detail-item">
      <div class="label">Subnet</div>
      <div class="value">{{ allocation.cidr }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Pool</div>
      <div class="value">{{ allocation.pool_name }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Typ</div>
      <div class="value">{{ allocation.kind }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Stav</div>
      <div class="value"><span class="status {{ allocation.status }}">{{ allocation.status }}</span></div>
    </div>
    <div class="detail-item">
      <div class="label">Celkem adres</div>
      <div class="value">{{ allocation.address_count }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Použitelných hostů</div>
      <div class="value">{{ allocation.usable_host_count }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Network address</div>
      <div class="value">{{ allocation.network }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Broadcast address</div>
      <div class="value">{{ allocation.broadcast }}</div>
    </div>
    <div class="detail-item">
      <div class="label">První host</div>
      <div class="value">{{ allocation.first_host }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Poslední host</div>
      <div class="value">{{ allocation.last_host }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Poznámka</div>
      <div class="value">{{ allocation.note }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Ticket / reference</div>
      <div class="value">{{ allocation.ticket }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Vytvořeno</div>
      <div class="value">{{ allocation.created_at_local }} ({{ allocation.created_by }})</div>
    </div>
    {% if allocation.released_at_local != "–" %}
    <div class="detail-item">
      <div class="label">Uvolněno</div>
      <div class="value">{{ allocation.released_at_local }} ({{ allocation.released_by }})</div>
    </div>
    <div class="detail-item">
      <div class="label">Poznámka k uvolnění</div>
      <div class="value">{{ allocation.release_note }}</div>
    </div>
    {% endif %}
  </div>

  {% if allocation.status == "active" || allocation.status == "reserved" %}
  <button class="btn btn-danger" onclick="document.getElementById('release-modal').style.display='flex'">Uvolnit subnet</button>
  {% endif %}

  <a href="/" class="btn btn-secondary">Zpět</a>
</section>

{% if audit_events.len() > 0 %}
<section class="box">
  <div class="box-title">Auditní historie</div>
  <table>
    <thead>
      <tr>
        <th>Čas</th>
        <th>Událost</th>
        <th>Aktor</th>
        <th>Detaily</th>
      </tr>
    </thead>
    <tbody>
      {% for e in audit_events %}
      <tr>
        <td data-label="Čas">{{ e.created_at_local }}</td>
        <td data-label="Událost">{{ e.event_type }}</td>
        <td data-label="Aktor">{{ e.actor }}</td>
        <td data-label="Detaily"><pre class="small" style="margin:0;">{{ e.details_json }}</pre></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

<dialog id="release-modal" class="modal-overlay" style="display:none;">
  <div class="modal">
    <h2 class="modal-title">Uvolnit subnet {{ allocation.cidr }}</h2>
    <form method="post" action="/allocations/{{ allocation.id }}/release" class="modal-body" id="release-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <p class="small">Subnet přejde do stavu <span class="status released">released</span> a adresní prostor bude znovu použitelný first-fit algoritmem. Záznam zůstane v historii.</p>
      <label for="release-note">Poznámka k uvolnění *</label>
      <textarea id="release-note" name="release_note" rows="3" required minlength="3" maxlength="500"></textarea>
    </form>
    <div class="modal-actions">
      <button type="button" class="btn btn-secondary" onclick="document.getElementById('release-modal').style.display='none'">Zrušit</button>
      <button type="submit" class="btn btn-danger" form="release-form">Uvolnit</button>
    </div>
  </div>
</dialog>
{% endblock %}