{% extends "base.html" %}

{% block title %}Detail {{ allocation.cidr }} | SUB-ALIGATOR{% endblock %}

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

<section class="box">
  <div class="box-title">Allocation detail {{ 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">Type</div>
      <div class="value">{{ allocation.kind }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Status</div>
      <div class="value"><span class="status {{ allocation.status }}">{{ allocation.status }}</span></div>
    </div>
    <div class="detail-item">
      <div class="label">Total addresses</div>
      <div class="value">{{ allocation.address_count }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Usable hosts</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">First host</div>
      <div class="value">{{ allocation.first_host }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Last host</div>
      <div class="value">{{ allocation.last_host }}</div>
    </div>
    <div class="detail-item">
      <div class="label">Note</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">Created</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">Released</div>
      <div class="value">{{ allocation.released_at_local }} ({{ allocation.released_by }})</div>
    </div>
    <div class="detail-item">
      <div class="label">Release note</div>
      <div class="value">{{ allocation.release_note }}</div>
    </div>
    {% endif %}
  </div>

  {% if allocation.status == "active" || allocation.status == "reserved" %}
  <button class="btn btn-danger release-btn" data-id="{{ allocation.id }}">Release subnet</button>
  {% endif %}

  <a href="/" class="btn btn-secondary">Back</a>
</section>

{% if audit_events.len() > 0 %}
<section class="box">
  <div class="box-title">Audit history</div>
  <table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Event</th>
        <th>Actor</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      {% for e in audit_events %}
      <tr>
        <td data-label="Time">{{ e.created_at_local }}</td>
        <td data-label="Event">{{ e.event_type }}</td>
        <td data-label="Actor">{{ e.actor }}</td>
        <td data-label="Details"><pre class="small" style="margin:0;">{{ e.details_json }}</pre></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

<div id="release-modal-{{ allocation.id }}" class="modal-overlay" style="display:none;">
  <div class="modal">
    <h2 class="modal-title">Release 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">The subnet will be marked as <span class="status released">released</span> and its address space will become available again via the first-fit algorithm. The record remains in history.</p>
      <label for="release-note">Release note *</label>
      <textarea id="release-note" name="release_note" rows="3" required minlength="3" maxlength="500"></textarea>
      <div class="modal-actions">
        <button type="button" class="btn btn-secondary cancel-btn" data-modal="release-modal-{{ allocation.id }}">Cancel</button>
        <button type="submit" class="btn btn-danger">Release</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}