{% 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>
          Product / Service 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>Description</label>
            <textarea name="description">{{ form.description }}</textarea>
          </div>

          <div class="field {{ errors.unit_price is defined ? 'has-error' : '' }}">
            <label>Unit Price</label>
            <input type="number" step="0.01" name="unit_price" value="{{ form.unit_price }}">
            {% if errors.unit_price is defined %}<span class="form-error">{{ errors.unit_price }}</span>{% endif %}
          </div>

          <div class="field {{ errors.tax_rate is defined ? 'has-error' : '' }}">
            <label>Tax Rate (%)</label>
            <input type="number" step="0.01" name="tax_rate" value="{{ form.tax_rate }}">
            {% if errors.tax_rate is defined %}<span class="form-error">{{ errors.tax_rate }}</span>{% endif %}
          </div>

          <label class="checkbox-field full">
            <input type="checkbox" name="is_active" value="1" {{ form.is_active ? 'checked' : '' }}>
            <span>Active</span>
          </label>
        </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 Product / Service</button>
    </div>
  </form>
{% endblock %}