{% if proprietaire is defined and proprietaire.id is not null %}
    {{ form_start(form, {'action': path('admin.properties.edit', {'id': properties.id}), 'method': 'POST'}) }}
{% else %}
    {{ form_start(form, {'action': path('admin.properties.new'), 'method': 'POST'}) }}
{% endif %}
{{ alert_infos('NB!', 'Tous les champs comportant un (*) sont obligatoires.') }}
<ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item">
        <a href="#vertical-left-infos" class="nav-link active" data-toggle="tab">
            <i class="icon-info22 mr-2"></i> Infos appartements
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-cautions" class="nav-link" data-toggle="tab">
            <i class="icon-file-plus mr-2"></i> Cautions & Bails
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-documents" class="nav-link" data-toggle="tab">
            <i class="icon-file-plus mr-2"></i> Fichiers & Documents
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="vertical-left-infos">
        <div class="row mb-2">
            <div class="col-sm-4">
                <label class="form-label">{{ form_label(form.categories) }}</label>
                {{ form_widget(form.categories) }}
                <a href="javascript:void(0)">{{ form_help(form.categories) }}</a>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.name) }}</label>
                    {{ form_widget(form.name) }}
                    <a href="javascript:void(0)">{{ form_help(form.name) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.numAppartement) }}</label>
                    {{ form_widget(form.numAppartement) }}
                    <a href="javascript:void(0)">{{ form_help(form.numAppartement) }}</a>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.montantLoyer) }}</label>
                    {{ form_widget(form.montantLoyer) }}
                    <a href="javascript:void(0)">{{ form_help(form.montantLoyer) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <label class="form-label">{{ form_label(form.locataires) }}</label>
                {{ form_widget(form.locataires) }}
                <a href="javascript:void(0)">{{ form_help(form.locataires) }}</a>
            </div>
            <div class="col-sm-4">
                <label class="form-label">{{ form_label(form.proprietaires) }}</label>
                {{ form_widget(form.proprietaires) }}
                <a href="javascript:void(0)">{{ form_help(form.proprietaires) }}</a>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-sm-6">
                <label class="form-label">{{ form_label(form.delaisLoyer) }}</label>
                {{ form_widget(form.delaisLoyer) }}
                <a href="javascript:void(0)">{{ form_help(form.delaisLoyer) }}</a>
            </div>
            <div class="col-sm-6">
                <label class="form-label">{{ form_label(form.locations) }}</label>
                {{ form_widget(form.locations) }}
                <a href="javascript:void(0)">{{ form_help(form.locations) }}</a>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-sm-12">
                <label class="form-label">{{ form_label(form.adresse) }}</label>
                {{ form_widget(form.adresse) }}
                <a href="javascript:void(0)">{{ form_help(form.adresse) }}</a>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-sm-12" style="display: flex; flex-direction: row; align-items: center;">
                {{ form_widget(form.isActif) }}
                {#{% if propertie.id %}
                    {{ form_widget(form.isOccupied) }}
                {% endif %}#}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="vertical-left-cautions">
        <div class="alert alert-warning alert-styled-left alert-dismissible">
            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
            <span class="font-weight-semibold">NB!</span> Cette section permet de générer la facture une fois les champs remplis ainsi que le locataire sélectionné.
        </div>
        <div class="row mb-2">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionGestionnaire) }}</label>
                    {{ form_widget(form.cautionGestionnaire) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionGestionnaire) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionLibelle) }}</label>
                    {{ form_widget(form.cautionLibelle) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionLibelle) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionDate) }}</label>
                    {{ form_widget(form.cautionDate) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionDate) }}</a>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionMois) }}</label>
                    {{ form_widget(form.cautionMois) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionMois) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionPeriode) }}</label>
                    {{ form_widget(form.cautionPeriode) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionPeriode) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.cautionMontant) }}</label>
                    {{ form_widget(form.cautionMontant) }}
                    <a href="javascript:void(0)">{{ form_help(form.cautionMontant) }}</a>
                </div>
            </div>
        </div>

        <!-- form part -->
        <div class="mb-2">
            <h5>Ajouter des options</h5>
            <hr>
            <div id="chargecaution"
                 data-prototype="{{ include('admin/properties/partials/form_cautions.html.twig', {'form': form.chargescautions.vars.prototype})|e('html_attr') }}"
                 data-index="{{ form.chargescautions|length > 0 ? form.chargescautions|last.vars.name + 1 : 0 }}">
                {% for chargecaution in form.chargescautions %}
                    <div class="row">
                        {{ include('admin/properties/partials/form_cautions.html.twig', {'form': chargecaution}) }}
                    </div>
                {% endfor %}
            </div>
            <button type="button" class="btn btn-success pull-right btn-sm new-chargecaution" data-collection="#chargecaution">
                <i class="icon-plus3"></i> Ajouter
            </button>
        </div>
        <!-- end of form part -->
    </div>

    <div class="tab-pane fade" id="vertical-left-documents">
        <!-- form part -->
        <div class="mb-5">
            <div class="mb-3" id="document"
                 data-prototype="{{ include('admin/properties/partials/form_documents.html.twig', {'form': form.documents.vars.prototype})|e('html_attr') }}"
                 data-index="{{ form.documents|length > 0 ? form.documents|last.vars.name + 1 : 0 }}">
                {% for document in form.documents %}
                    <div class="row">
                        {{ include('admin/properties/partials/form_documents.html.twig', {'form': document}) }}
                    </div>
                {% endfor %}
            </div>
            <button type="button" class="btn btn-success pull-right btn-sm new-document" data-collection="#document">
                <i class="icon-plus3"></i> Ajouter un document
            </button>
        </div>
        <!-- end of form part -->
    </div>
</div>

<div class="text-right mt-3">
    <button type="reset" class="btn btn-sm btn-default">Annuler</button> &nbsp;
    <button type="submit" id="sendPropertieBtn" class="btn btn-sm btn-primary"><i class="icon-floppy-disk"></i> {{ button_label|default('Enregistrer') }}</button>
</div>
{{ form_end(form) }}