{% set modal = modal|default(false) %}
{% if errors._global is defined and not modal %}
    <div class="alert alert-danger">{{ errors._global }}</div>
{% endif %}

{% if modal %}<turbo-frame id="frame_modal">{% endif %}
<form method="post" action="{{ action }}" class="{{ modal ? '' : 'card' }}"{% if modal %} data-turbo="true" data-turbo-stream="true"{% endif %}>
    {% if modal %}
        <div class="modal-header border-bottom">
            <div>
                <h5 class="modal-title">{{ modal_title|default('Ajouter un contact') }}</h5>
                <small class="text-body-secondary">{{ client.nom }}</small>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
    {% endif %}
    <div class="{{ modal ? 'modal-body' : 'card-body' }}">
        {% if errors._global is defined and modal %}<div class="alert alert-danger">{{ errors._global }}</div>{% endif %}
        <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label" for="contact_prenom">Prenom</label>
                <input id="contact_prenom" type="text" name="contact[prenom]" value="{{ data.prenom }}" class="form-control{% if errors.prenom is defined %} is-invalid{% endif %}" required>
                {% if errors.prenom is defined %}<div class="invalid-feedback">{{ errors.prenom }}</div>{% endif %}
            </div>
            <div class="col-md-6">
                <label class="form-label" for="contact_nom">Nom</label>
                <input id="contact_nom" type="text" name="contact[nom]" value="{{ data.nom }}" class="form-control{% if errors.nom is defined %} is-invalid{% endif %}" required>
                {% if errors.nom is defined %}<div class="invalid-feedback">{{ errors.nom }}</div>{% endif %}
            </div>
            <div class="col-md-6">
                <label class="form-label" for="contact_email">Email *</label>
                <input id="contact_email" type="email" name="contact[email]" value="{{ data.email }}" class="form-control{% if errors.email is defined %} is-invalid{% endif %}" required>
                {% if errors.email is defined %}<div class="invalid-feedback">{{ errors.email }}</div>{% endif %}
            </div>
            <div class="col-md-6">
                <label class="form-label" for="contact_telephone">Telephone</label>
                <input id="contact_telephone" type="text" name="contact[telephone]" value="{{ data.telephone }}" class="form-control" inputmode="tel">
            </div>
            <div class="col-md-8">
                <label class="form-label" for="contact_fonction">Fonction</label>
                <input id="contact_fonction" type="text" name="contact[fonction]" value="{{ data.fonction }}" class="form-control">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <div>
                <div class="form-check">
                    <input id="contact_actif" type="checkbox" name="contact[actif]" value="1" class="form-check-input" {% if data.actif %}checked{% endif %}>
                    <label class="form-check-label" for="contact_actif">Contact actif</label>
                </div>
                <div class="form-check mt-2">
                    <input id="contact_principal" type="checkbox" name="contact[principal]" value="1" class="form-check-input" {% if data.principal %}checked{% endif %}>
                    <label class="form-check-label" for="contact_principal">Contact principal</label>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="{{ modal ? 'modal-footer' : 'card-footer' }} d-flex justify-content-end gap-2">
        {% if modal %}
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
        {% else %}
            <a href="{{ cancel_url|default(path('commercial_client_show', {id: client.id})) }}" class="btn btn-outline-secondary">Annuler</a>
        {% endif %}
        <button type="submit" class="btn btn-primary">{{ submit_label }}</button>
    </div>
</form>
{% if modal %}</turbo-frame>{% endif %}