{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Customers</h1>
      <p class="page-subtitle">Manage customer records used by quotations and invoices.</p>
    </div>

    <a class="btn btn-primary" href="{{ base_url }}/customers/create" data-modal-form>Create Customer</a>
  </div>

  {% if saved|default(false) %}
    <div class="alert alert-success">Customer saved.</div>
  {% endif %}

  {% if updated|default(false) %}
    <div class="alert alert-success">Customer updated.</div>
  {% endif %}

  <section class="list-panel">
    <form class="list-toolbar" method="get" action="{{ base_url }}/customers">
      <div class="search-field">
        <span aria-hidden="true">
          <svg viewBox="0 0 24 24">
            <path d="m21 21-4.35-4.35"></path>
            <circle cx="11" cy="11" r="7"></circle>
          </svg>
        </span>
        <input type="search" name="search" value="{{ search }}" placeholder="Search customers, companies, email, phone...">
      </div>

      <button class="btn btn-outline" type="submit">Search</button>
    </form>

    {% if customers is empty %}
      <div class="empty-state">
        <h2>No customers found</h2>
        <p>Create customers so quotation forms can autofill contact and billing details.</p>
        <a class="btn btn-primary" href="{{ base_url }}/customers/create" data-modal-form>Create Customer</a>
      </div>
    {% else %}
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Company</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Tax Number</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for customer in customers %}
              <tr>
                <td><div class="item-name">{{ customer.name }}</div></td>
                <td><div class="item-desc">{{ customer.company_name ?: '-' }}</div></td>
                <td>{{ customer.email ?: '-' }}</td>
                <td>{{ customer.phone ?: '-' }}</td>
                <td>{{ customer.tax_number ?: '-' }}</td>
                <td>
                  <div class="row-actions">
                    <a class="btn btn-outline btn-small" href="{{ base_url }}/customers/{{ customer.id }}">View</a>
                    <a class="btn btn-outline btn-small" href="{{ base_url }}/customers/{{ customer.id }}/edit" data-modal-form>Edit</a>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
{% endblock %}