{% extends 'base.html' %}
{% block title %}{{ model_name }} Form | {{ app_name|capfirst }}{% endblock %}
{% block content %}
<div class="container-lg">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
          <h2 class="h5 mb-0">{{ model_name }} Form</h2>
        </div>
        <form method="post" novalidate class="needs-validation">
          {% csrf_token %}
          <div class="card-body">
            {% for field in form %}
            <div class="mb-4">
              <label for="{{ field.id_for_label }}" class="form-label">
                {{ field.label }}
                {% if field.field.required %}
                <span class="text-danger" aria-label="required">*</span>
                {% endif %}
              </label>
              <input type="{{ field.field.widget.input_type }}"
                     name="{{ field.name }}"
                     id="{{ field.id_for_label }}"
                     class="form-control {% if field.errors %}is-invalid{% endif %}"
                     value="{{ field.value|default_if_none:'' }}"
                     {% if field.field.required %}required{% endif %}>
              {% if field.help_text %}
              <small class="form-text text-muted">{{ field.help_text }}</small>
              {% endif %}
              {% for error in field.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>
            {% endfor %}
          </div>
          <div class="card-footer bg-light">
            <button type="submit" class="btn btn-primary px-4">
              <i class="fas fa-paper-plane me-2"></i> Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
