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

{% block title %}{{ organization.name }} — Édition — VIIZIA{% endblock %}

{% block body %}
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        {% if is_granted('ROLE_SUPERADMIN') %}
            <li><a href="{{ path('admin_organizations_index') }}">Organisations</a></li>
        {% else %}
            <li><a href="{{ path('app_home') }}">Accueil</a></li>
        {% endif %}
        <li class="is-active"><a href="#" aria-current="page">{{ organization.name }}</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="fas fa-pen-to-square"></i></span>
                    <span>{{ organization.name }}</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                Créée le {{ organization.createdAt|date('d/m/Y') }} ·
                Slug <code>{{ organization.slug }}</code> ·
                {{ memberships|length }} membre{{ memberships|length > 1 ? 's' : '' }} ·
                {{ bank_accounts|length }} compte{{ bank_accounts|length > 1 ? 's' : '' }}
            </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="fas fa-circle-info"></i></span>
                <span>Informations</span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="utilisateurs">
            <a>
                <span class="icon is-small"><i class="fas fa-users"></i></span>
                <span>Utilisateurs <span class="tag is-rounded ml-2">{{ memberships|length }}</span></span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="comptes">
            <a>
                <span class="icon is-small"><i class="ti ti-credit-card"></i></span>
                <span>Comptes <span class="tag is-rounded ml-2">{{ bank_accounts|length }}</span></span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="biens">
            <a>
                <span class="icon is-small"><i class="ti ti-building-skyscraper"></i></span>
                <span>Biens <span class="tag is-rounded ml-2">{{ properties|length }}</span></span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="plateformes">
            <a>
                <span class="icon is-small"><i class="ti ti-world"></i></span>
                <span>Plateformes</span>
            </a>
        </li>
    </ul>
</div>

<section data-tabs-target="panel" data-tab="informations">
    {% include 'admin/organization/_form.html.twig' %}

    {% if is_granted('ROLE_SUPERADMIN') %}
    <div class="box has-background-danger-light mt-5">
        <h3 class="title is-6 has-text-danger">
            <span class="icon-text">
                <span class="icon"><i class="fas fa-triangle-exclamation"></i></span>
                <span>Zone dangereuse</span>
            </span>
        </h3>
        <p class="content is-small">
            La suppression d'une organisation est irréversible et entraîne la perte de tous ses
            membres, comptes et transactions associés.
        </p>
        <form method="post"
              action="{{ path('admin_organizations_delete', {'id': organization.id}) }}"
              onsubmit="return confirm('Supprimer définitivement « {{ organization.name|e('js') }} » ? Cette action est irréversible.');">
            <input type="hidden" name="_token" value="{{ csrf_token('delete-organization-' ~ organization.id) }}">
            <button type="submit" class="button is-danger is-light">
                <span class="icon"><i class="fas fa-trash"></i></span>
                <span>Supprimer cette organisation</span>
            </button>
        </form>
    </div>
    {% endif %}
</section>

<section data-tabs-target="panel" data-tab="utilisateurs" style="display: none;">
    {% include 'admin/membership/_section.html.twig' with {
        'organization': organization,
        'memberships': memberships,
    } only %}
</section>

<section data-tabs-target="panel" data-tab="comptes" style="display: none;">
    {% include 'admin/bank_account/_section.html.twig' with {
        'organization': organization,
        'bank_accounts': bank_accounts,
    } only %}
</section>

<section data-tabs-target="panel" data-tab="biens" style="display: none;">
    {% include 'admin/property/_section.html.twig' with {
        'organization': organization,
        'properties': properties,
    } only %}
</section>

<section data-tabs-target="panel" data-tab="plateformes" style="display: none;">
    {% include 'admin/organization_rental_platform/_section.html.twig' with {
        'organization': organization,
        'rental_platforms': rental_platforms,
        'existing_links': existing_links,
    } only %}
</section>

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