{% extends 'base.html.twig' %}
{% import '_partials/form_appearance_macros.html.twig' as appearance %}

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

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

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="{{ path('admin_rental_platforms_index') }}">Plateformes de location</a></li>
        <li class="is-active"><a href="#" aria-current="page">{{ platform.name }}</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="viz-org-avatar mr-2" style="background-color: {{ platform.color ?: '#6B7280' }};">
                        {% if platform.icon %}<i class="ti {{ platform.icon }}"></i>{% else %}{{ platform.name|first|upper }}{% endif %}
                    </span>
                    <span>{{ platform.name }}</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                <span class="tag is-{{ platform.status.color }} is-light">{{ platform.status.label }}</span>
                · slug <code>{{ platform.slug }}</code>
            </p>
        </div>
    </div>
</div>

{{ 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-half">{{ field(form.name) }}</div>
            <div class="column is-half">{{ field(form.slug, {'icon': 'link'}) }}</div>
        </div>
        {{ appearance.expandable_color_field(form.color, { optional: true }) }}
        {{ appearance.expandable_icon_tabler_field(form.icon) }}
        {{ field(form.website, {'icon': 'globe'}) }}
        {{ select_field(form.status) }}
    </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_rental_platforms_index') }}" class="button is-light">Annuler</a>
        </div>
    </div>

{{ form_end(form) }}
{% endblock %}

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