{% extends 'base.html.twig' %}

{% block title %}{{ property.code }} — Édition — VIIZIA{% endblock %}

{% block body %}
{% from 'admin/organization/_form.html.twig' import field, select_field %}
{% set organization = property.organization %}

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="{{ path('admin_organizations_index') }}">Organisations</a></li>
        <li><a href="{{ path('admin_organizations_edit', {'id': organization.id, '_fragment': 'biens'}) }}">{{ organization.name }}</a></li>
        <li class="is-active"><a href="#" aria-current="page">{{ property.code }}</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-building-skyscraper"></i></span>
                    <span>{{ property.getDisplayName() }}</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                <span class="tag is-{{ property.status.color }} is-light">{{ property.status.label }}</span>
                {% if property.city %}· {{ property.city }}{% endif %}
                {% if property.surfaceM2 %}· {{ property.surfaceM2 }} m²{% endif %}
            </p>
        </div>
    </div>
</div>

<div class="tabs is-boxed" data-controller="tabs">
    <ul>
        <li data-tabs-target="tab" data-tab="informations" class="is-active">
            <a>
                <span class="icon is-small"><i class="ti ti-info-circle"></i></span>
                <span>Informations</span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="annonces">
            <a>
                <span class="icon is-small"><i class="ti ti-world"></i></span>
                <span>Annonces plateforme <span class="tag is-rounded ml-2">{{ platform_listings|default([])|length }}</span></span>
            </a>
        </li>
    </ul>
</div>

<section data-tabs-target="panel" data-tab="informations">
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

        {% if form.vars.errors|length > 0 %}
            <div class="notification is-danger is-light">
                <span class="icon"><i class="ti ti-alert-circle"></i></span>
                <strong>Le formulaire contient des erreurs :</strong>
                <ul class="mt-2">
                    {% for error in form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}
                </ul>
            </div>
        {% endif %}

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-id-badge"></i></span>
                    <span>Identification</span>
                </span>
            </h3>

            <div class="columns">
                <div class="column is-one-third">{{ field(form.code, {'icon': 'hash'}) }}</div>
                <div class="column">{{ field(form.label) }}</div>
            </div>
            {{ select_field(form.status) }}
        </div>

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-map-pin"></i></span>
                    <span>Adresse</span>
                </span>
            </h3>

            {{ field(form.addressLine1) }}
            {{ field(form.addressLine2) }}
            <div class="columns">
                <div class="column is-one-third">{{ field(form.postalCode) }}</div>
                <div class="column">{{ field(form.city) }}</div>
            </div>
            {{ select_field(form.country) }}
        </div>

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-ruler"></i></span>
                    <span>Caractéristiques</span>
                </span>
            </h3>

            <div class="columns">
                <div class="column">{{ field(form.surfaceM2) }}</div>
                <div class="column">{{ field(form.bedrooms) }}</div>
            </div>
            {{ field(form.notes) }}
        </div>

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-receipt"></i></span>
                    <span>Comptes de facturation (import)</span>
                </span>
            </h3>
            <p class="subtitle is-7 has-text-grey mb-4">
                Saisissez exactement une portion du texte utilisé par votre banque (libellé et/ou colonne référence du CSV ou du PDF).
                Seules les dépenses (montants sortants) peuvent être rattachées automatiquement à ce bien.
            </p>
            {{ field(form.billingAccountElectricity, {'icon': 'bolt'}) }}
            {{ field(form.billingAccountWater, {'icon': 'tint'}) }}
            {{ field(form.billingAccountInternet, {'icon': 'wifi'}) }}
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button type="submit" class="button is-primary">
                    <span class="icon"><i class="ti ti-device-floppy"></i></span>
                    <span>Enregistrer</span>
                </button>
            </div>
            <div class="control">
                <a href="{{ path('admin_organizations_edit', {'id': organization.id, '_fragment': 'biens'}) }}"
                   class="button is-light">Annuler</a>
            </div>
        </div>

    {{ form_end(form) }}
</section>

<section data-tabs-target="panel" data-tab="annonces" style="display: none;">
    {% include 'admin/property/_platform_listings_section.html.twig' with {
        platform_listings: platform_listings|default([]),
        property: property,
    } only %}
</section>

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/tabs.js') }}" defer></script>
{% endblock %}
{% endblock %}