{% extends "base.html" %}
{% block title %}Add Board – Location Management{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ url_for('boards.list_boards') }}">Boards</a></li>
    <li class="breadcrumb-item active">Add Board</li>
  </ol>
</nav>

<div class="card border-0 rounded-4" style="max-width:640px">
  <div class="card-header bg-transparent fw-semibold pt-3">
    <i class="bi bi-plus-circle me-1 text-primary"></i> Add New Board
  </div>
  <div class="card-body">
    <form method="POST">
      <div class="mb-3">
        <label class="form-label">Local Name</label>
        <input type="text" name="name" class="form-control" placeholder="e.g. Server Room Board" required />
      </div>
      <div class="mb-3">
        <label class="form-label">Board Type</label>
        <select name="board_type" class="form-select" id="board_type_select" onchange="updateDefaults(this.value)">
          {% for value, label in board_types %}
          <option value="{{ value }}">{{ label }}</option>
          {% endfor %}
        </select>
        <div class="form-text text-secondary" id="driver_desc"></div>
      </div>
      {# ── Hardware board fields (hidden for Sonoff gateway) ── #}
      <div id="hw_fields">
        <div class="row g-3 mb-3">
          <div class="col-8">
            <label class="form-label">IP Address / Hostname</label>
            <input type="text" name="host" id="host_input" class="form-control font-monospace" placeholder="192.168.1.100" />
          </div>
          <div class="col-4">
            <label class="form-label">Port</label>
            <input type="number" name="port" class="form-control" value="80" min="1" max="65535" />
          </div>
        </div>
        <div class="row g-3 mb-4">
          <div class="col-6">
            <label class="form-label">Number of Relays</label>
            <input type="number" name="num_relays" id="num_relays" class="form-control" value="4" min="0" max="32" />
          </div>
          <div class="col-6">
            <label class="form-label">Number of Inputs</label>
            <input type="number" name="num_inputs" id="num_inputs" class="form-control" value="4" min="0" max="32" />
          </div>
        </div>
      </div>

      {# ── Sonoff gateway info ── #}
      <div id="sonoff_info" class="d-none mb-4">
        <div class="alert alert-info d-flex gap-3 align-items-start py-3">
          <i class="bi bi-cloud-lightning-fill fs-4 text-warning mt-1"></i>
          <div>
            <strong>Sonoff eWeLink Gateway</strong><br>
            <span class="small">
              After adding, you'll be redirected to set up your eWeLink account credentials.
              All your Sonoff devices will be discovered automatically from the cloud.
              LAN control is used when devices are reachable on the local network.
            </span>
          </div>
        </div>
      </div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Add Board</button>
        <a href="{{ url_for('boards.list_boards') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const driverDefaults = {
  {% for d in drivers %}
  "{{ d.DRIVER_ID }}": { relays: {{ d.DEFAULT_NUM_RELAYS }}, inputs: {{ d.DEFAULT_NUM_INPUTS }}, desc: "{{ d.DESCRIPTION }}" },
  {% endfor %}
};
function updateDefaults(type) {
  const d = driverDefaults[type] || { relays: 4, inputs: 4, desc: "" };
  document.getElementById("num_relays").value = d.relays;
  document.getElementById("num_inputs").value = d.inputs;
  document.getElementById("driver_desc").textContent = d.desc;

  const isGateway = type === "sonoff_ewelink";
  document.getElementById("hw_fields").classList.toggle("d-none", isGateway);
  document.getElementById("sonoff_info").classList.toggle("d-none", !isGateway);
  // host is not required for gateway
  document.getElementById("host_input").required = !isGateway;
}
// init on page load
updateDefaults(document.getElementById("board_type_select").value);
</script>
{% endblock %}