{% extends "base.html" %}
{% block title %}Edit Labels – {{ board.name }}{% 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"><a href="{{ url_for('boards.board_detail', board_id=board.id) }}">{{ board.name }}</a></li>
    <li class="breadcrumb-item active">Edit Labels</li>
  </ol>
</nav>

<h2 class="fw-bold mb-1">Edit Labels</h2>
<p class="text-secondary mb-4">Assign custom names to each relay and input (max 20 characters). Leave a field blank to use the default name.</p>

<form method="POST" action="{{ url_for('boards.edit_labels', board_id=board.id) }}">

  <div class="row g-4">

    <!-- ── Relay labels ───────────────────────────────────────────────────── -->
    <div class="col-md-6">
      <div class="card border-0 rounded-4">
        <div class="card-header bg-transparent fw-semibold pt-3">
          <i class="bi bi-lightning-charge me-1 text-warning"></i> Relay Names
        </div>
        <div class="card-body">
          {% for n in range(1, board.num_relays + 1) %}
          <div class="mb-3">
            <label class="form-label text-secondary small mb-1">Relay {{ n }}</label>
            <input type="text"
                   class="form-control"
                   name="relay_{{ n }}_label"
                   value="{{ board.labels.get('relay_' ~ n, '') }}"
                   maxlength="20"
                   placeholder="Relay {{ n }}" />
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- ── Input labels ───────────────────────────────────────────────────── -->
    <div class="col-md-6">
      <div class="card border-0 rounded-4">
        <div class="card-header bg-transparent fw-semibold pt-3">
          <i class="bi bi-activity me-1 text-info"></i> Input Names
        </div>
        <div class="card-body">
          {% for n in range(1, board.num_inputs + 1) %}
          <div class="mb-3">
            <label class="form-label text-secondary small mb-1">Input {{ n }}</label>
            <input type="text"
                   class="form-control"
                   name="input_{{ n }}_label"
                   value="{{ board.labels.get('input_' ~ n, '') }}"
                   maxlength="20"
                   placeholder="Input {{ n }}" />
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

  </div>

  <!-- ── Actions ────────────────────────────────────────────────────────── -->
  <div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary">
      <i class="bi bi-floppy me-1"></i> Save Labels
    </button>
    <a href="{{ url_for('boards.board_detail', board_id=board.id) }}" class="btn btn-outline-secondary">
      Cancel
    </a>
  </div>

</form>
{% endblock %}