{% extends "base.html" %}

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

{% block content %}
<section class="panel">
  <div class="page-heading">
    <h1>Servers</h1>
    {% if blueprints %}
    <button type="button" data-modal-open="create-server-modal">+ Create</button>
    {% else %}
    <a class="button" href="/blueprints">Create a blueprint first &rarr;</a>
    {% endif %}
  </div>
  <table class="table">
    <thead><tr><th>Name</th><th>Port</th><th>Blueprint</th><th>Desired</th><th>Actual</th></tr></thead>
    <tbody>
      {% for server, blueprint in rows %}
      <tr>
        <td><a href="/servers/{{ server.id }}">{{ server.name }}</a></td>
        <td>{{ server.port }}</td>
        <td><a href="/blueprints/{{ blueprint.id }}">{{ blueprint.name }}</a></td>
        <td>{{ server.desired_state }}</td>
        <td>{{ server.actual_state }}</td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="muted">No servers configured.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>

{% if blueprints %}
<dialog id="create-server-modal" class="modal" aria-labelledby="create-server-title">
  <form method="post" action="/servers" class="stack">
    <div class="modal-header">
      <h2 id="create-server-title">Create server</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></label>
      <label>Port
        <input name="port" type="number" min="1" max="65535" placeholder="auto">
        <span class="field-hint">Leave empty for the next available port.</span>
      </label>
      <label>Blueprint
        <select name="blueprint_id" required>
          {% for blueprint in blueprints %}
          <option value="{{ blueprint.id }}"{% if blueprint.id == prefill_blueprint_id %} selected{% endif %}>{{ blueprint.name }}</option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div class="modal-footer">
      <button type="button" class="button-secondary" data-modal-close>Cancel</button>
      <button type="submit">Create server</button>
    </div>
  </form>
</dialog>
{% endif %}

{% if prefill_blueprint_id %}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const dialog = document.getElementById("create-server-modal");
    if (dialog && typeof dialog.showModal === "function") {
      dialog.showModal();
    }
  });
</script>
{% endif %}
{% endblock %}