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

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ back_url }}" aria-label="Back">←</a>
    <h1>{{ heading }}</h1>
  </div>

  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% endif %}

  <form class="quotation-card product-form" method="post" action="{{ form_action }}">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

    {% if errors._csrf_token is defined %}
      <div class="form-error form-error-top">{{ errors._csrf_token }}</div>
    {% endif %}

    <div class="form-top product-form-grid">
      <section>
        <h2 class="section-title">
          <span>👤</span>
          Customer Details
        </h2>

        <div class="form-grid">
          <div class="field full {{ errors.name is defined ? 'has-error' : '' }}">
            <label>Name <span class="required">*</span></label>
            <input type="text" name="name" value="{{ form.name }}" required>
            {% if errors.name is defined %}<span class="form-error">{{ errors.name }}</span>{% endif %}
          </div>

          <div class="field full">
            <label>Company Name</label>
            <input type="text" name="company_name" value="{{ form.company_name }}">
          </div>

          <div class="field {{ errors.email is defined ? 'has-error' : '' }}">
            <label>Email</label>
            <input type="email" name="email" value="{{ form.email }}">
            {% if errors.email is defined %}<span class="form-error">{{ errors.email }}</span>{% endif %}
          </div>

          <div class="field">
            <label>Phone</label>
            <input type="text" name="phone" value="{{ form.phone }}">
          </div>

          <div class="field full">
            <label>Billing Address</label>
            <textarea name="billing_address">{{ form.billing_address }}</textarea>
          </div>

          <div class="field full">
            <label>Tax Number</label>
            <input type="text" name="tax_number" value="{{ form.tax_number }}">
          </div>
        </div>
      </section>
    </div>

    <div class="action-bar">
      <a class="btn btn-outline" href="{{ back_url }}">Cancel</a>
      <button class="btn btn-primary" type="submit">Save Customer</button>
    </div>
  </form>
{% endblock %}