{% extends 'base.html' %}
{% load static i18n %}

{% block title %}{{ title }} - ATS{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">{{ title }}</h1>
            <p class="text-muted mb-0">
                {% if agency %}
                    {% trans "Update the hiring agency information below." %}
                {% else %}
                    {% trans "Fill in the details to add a new hiring agency." %}
                {% endif %}
            </p>
        </div>
        <a href="{% url 'agency_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Agencies" %}
        </a>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                            <h5 class="alert-heading">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {% trans "Please correct the errors below:" %}
                            </h5>
                            {% for error in form.non_field_errors %}
                                <p class="mb-0">{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <form method="post" novalidate>
                        {% csrf_token %}

                        <!-- Name -->
                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">
                                {{ form.name.label }} <span class="text-danger">*</span>
                            </label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                {% for error in form.name.errors %}
                                    <div class="invalid-feedback d-block">{{ error }}</div>
                                {% endfor %}
                            {% endif %}
                            {% if form.name.help_text %}
                                <div class="form-text">{{ form.name.help_text }}</div>
                            {% endif %}
                        </div>

                        <!-- Contact Person and Phone -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.contact_person.id_for_label }}" class="form-label">
                                    {{ form.contact_person.label }}
                                </label>
                                {{ form.contact_person }}
                                {% if form.contact_person.errors %}
                                    {% for error in form.contact_person.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.contact_person.help_text %}
                                    <div class="form-text">{{ form.contact_person.help_text }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.phone.id_for_label }}" class="form-label">
                                    {{ form.phone.label }}
                                </label>
                                {{ form.phone }}
                                {% if form.phone.errors %}
                                    {% for error in form.phone.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.phone.help_text %}
                                    <div class="form-text">{{ form.phone.help_text }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Email and Website -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.email.id_for_label }}" class="form-label">
                                    {{ form.email.label }}
                                </label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    {% for error in form.email.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.email.help_text %}
                                    <div class="form-text">{{ form.email.help_text }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.website.id_for_label }}" class="form-label">
                                    {{ form.website.label }}
                                </label>
                                {{ form.website }}
                                {% if form.website.errors %}
                                    {% for error in form.website.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.website.help_text %}
                                    <div class="form-text">{{ form.website.help_text }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Address -->
                        <div class="mb-3">
                            <label for="{{ form.address.id_for_label }}" class="form-label">
                                {{ form.address.label }}
                            </label>
                            {{ form.address }}
                            {% if form.address.errors %}
                                {% for error in form.address.errors %}
                                    <div class="invalid-feedback d-block">{{ error }}</div>
                                {% endfor %}
                            {% endif %}
                            {% if form.address.help_text %}
                                <div class="form-text">{{ form.address.help_text }}</div>
                            {% endif %}
                        </div>

                        <!-- Country and City -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.country.id_for_label }}" class="form-label">
                                    {{ form.country.label }}
                                </label>
                                {{ form.country }}
                                {% if form.country.errors %}
                                    {% for error in form.country.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.country.help_text %}
                                    <div class="form-text">{{ form.country.help_text }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.city.id_for_label }}" class="form-label">
                                    {{ form.city.label }}
                                </label>
                                {{ form.city }}
                                {% if form.city.errors %}
                                    {% for error in form.city.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                {% if form.city.help_text %}
                                    <div class="form-text">{{ form.city.help_text }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }}
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                {% for error in form.description.errors %}
                                    <div class="invalid-feedback d-block">{{ error }}</div>
                                {% endfor %}
                            {% endif %}
                            {% if form.description.help_text %}
                                <div class="form-text">{{ form.description.help_text }}</div>
                            {% endif %}
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'agency_list' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i> {% trans "Cancel" %}
                            </a>
                            <button type="submit" class="btn btn-main-action">
                                <i class="fas fa-save me-1"></i> {{ button_text }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap classes to form fields
    const formFields = document.querySelectorAll('input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select');
    formFields.forEach(function(field) {
        field.classList.add('form-control');
    });
});
</script>
{% endblock %}