{% extends "base.html" %}

{% block title %}Blueprints | left4me{% endblock %}

{% block content %}
<section class="panel">
  <div class="page-heading">
    <h1>Blueprints</h1>
    <button type="button" data-modal-open="create-blueprint-modal">+ Create</button>
  </div>
  <table class="table">
    <thead><tr><th>Name</th><th>Created</th><th>Updated</th><th>Actions</th></tr></thead>
    <tbody>
      {% for blueprint in blueprints %}
      <tr>
        <td><a href="/blueprints/{{ blueprint.id }}">{{ blueprint.name }}</a></td>
        <td>{{ blueprint.created_at | timeago }}</td>
        <td>{{ blueprint.updated_at | timeago }}</td>
        <td><a href="/servers?blueprint_id={{ blueprint.id }}">Create server</a></td>
      </tr>
      {% else %}
      <tr><td colspan="4" class="muted">No blueprints configured.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<dialog id="create-blueprint-modal" class="modal" aria-labelledby="create-blueprint-title">
  <form method="post" action="/blueprints" class="stack">
    <div class="modal-header">
      <h2 id="create-blueprint-title">Create blueprint</h2>
      <button type="button" class="modal-close" data-modal-close aria-label="Close">&times;</button>
    </div>
    <div class="modal-body">
      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
      <label>Name <input name="name" required autofocus></label>
      {# Arguments, config, and overlay assignments are edited on the
         blueprint detail page where the srccfg editor + overlay picker
         live. Keeping the create modal name-only avoids the conflict
         where modal textareas can't host the editor cleanly. #}
    </div>
    <div class="modal-footer">
      <button type="button" class="button-secondary" data-modal-close>Cancel</button>
      <button type="submit">Create blueprint</button>
    </div>
  </form>
</dialog>
{% endblock %}