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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Products / Services</h1>
      <p class="page-subtitle">Manage reusable quotation line items and default prices.</p>
    </div>

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

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

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

  <section class="list-panel">
    <form class="list-toolbar" method="get" action="{{ base_url }}/products">
      <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 products and services...">
      </div>

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

    {% if products is empty %}
      <div class="empty-state">
        <h2>No products or services found</h2>
        <p>Create reusable services so quotation rows can autofill prices and tax defaults.</p>
        <a class="btn btn-primary" href="{{ base_url }}/products/create" data-modal-form>Create Product / Service</a>
      </div>
    {% else %}
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>Unit Price</th>
              <th>Tax</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for product in products %}
              <tr>
                <td><div class="item-name">{{ product.name }}</div></td>
                <td><div class="item-desc">{{ product.description ?: '-' }}</div></td>
                <td class="line-total">KES {{ product.unit_price|number_format(2) }}</td>
                <td>{{ product.tax_rate|number_format(2) }}%</td>
                <td>
                  <span class="status-badge {{ product.is_active ? 'status-accepted' : 'status-cancelled' }}">
                    {{ product.is_active ? 'Active' : 'Inactive' }}
                  </span>
                </td>
                <td>
                  <a class="btn btn-outline btn-small" href="{{ base_url }}/products/{{ product.id }}/edit" data-modal-form>Edit</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
{% endblock %}