{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-7 offset-md-2">

    {% if customer %}
    <div class="card shadow-sm mb-3">
      <div class="card-body d-flex align-items-center justify-content-between">
        <div>
          <span class="fw-semibold me-2">Account Status:</span>
          <span class="badge fs-6 bg-{{ 'success' if customer.active else 'secondary' }}">
            {{ 'Active' if customer.active else 'Disabled' }}
          </span>
          <div class="form-text mt-1">
            {% if customer.active %}
            Disabling prevents the customer from logging in immediately.
            {% else %}
            This account is currently disabled — the customer cannot log in.
            {% endif %}
          </div>
        </div>
        <form method="POST" action="{{ url_for('customers.toggle_active', customer_id=customer.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit"
                  class="btn btn-sm {{ 'btn-outline-warning' if customer.active else 'btn-outline-success' }}"
                  onclick="return confirm('{{ 'Disable' if customer.active else 'Enable' }} {{ customer.username }}?')">
            <i class="bi bi-{{ 'person-slash' if customer.active else 'person-check' }} me-1"></i>
            {{ 'Disable Account' if customer.active else 'Enable Account' }}
          </button>
        </form>
      </div>
    </div>
    {% endif %}

    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0"><i class="bi bi-person-badge me-2"></i>{{ title }}</h4>
      </div>
      <div class="card-body">
        <form method="POST">
          {{ form.hidden_tag() }}

          <div class="row">
            <div class="col-md-6 mb-3">
              {{ form.username.label(class="form-label") }}
              {{ form.username(class="form-control") }}
              {% if form.username.errors %}
              <div class="text-danger small mt-1">
                {% for e in form.username.errors %}{{ e }}{% endfor %}
              </div>
              {% endif %}
            </div>
            <div class="col-md-6 mb-3">
              {{ form.email.label(class="form-label") }}
              {{ form.email(class="form-control") }}
              {% if form.email.errors %}
              <div class="text-danger small mt-1">
                {% for e in form.email.errors %}{{ e }}{% endfor %}
              </div>
              {% endif %}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              {{ form.password.label(class="form-label") }}
              {{ form.password(class="form-control",
                 placeholder="Leave blank to keep current" if customer else "Min. 8 characters") }}
              {% if form.password.errors %}
              <div class="text-danger small mt-1">
                {% for e in form.password.errors %}{{ e }}{% endfor %}
              </div>
              {% endif %}
            </div>
            <div class="col-md-6 mb-3">
              {{ form.confirm_password.label(class="form-label") }}
              {{ form.confirm_password(class="form-control") }}
              {% if form.confirm_password.errors %}
              <div class="text-danger small mt-1">
                {% for e in form.confirm_password.errors %}{{ e }}{% endfor %}
              </div>
              {% endif %}
            </div>
          </div>

          <div class="d-flex gap-2 mt-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-save me-1"></i>
              {{ 'Save Changes' if customer else 'Create Customer' }}
            </button>
            {% if customer %}
            <a href="{{ url_for('customers.manage', customer_id=customer.id) }}"
               class="btn btn-secondary">
              <i class="bi bi-x-circle me-1"></i> Cancel
            </a>
            {% else %}
            <a href="{{ url_for('customers.index') }}" class="btn btn-secondary">
              <i class="bi bi-x-circle me-1"></i> Cancel
            </a>
            {% endif %}
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
{% endblock %}