{% extends "backoffice/sidebar.html" %}
{% load static %}
{% load i18n %}

{% load backoffice %}

{% block content %}
    <div class="has-box mb-4">
        <div class="mb-2 is-flex is-align-items-center has-flex-items">
            <div class="is-block">
                {% block title %}{% endblock %}
            </div>
            <div style="margin-left: auto">
                {% block actions %}
                {% endblock actions %}
            </div>
        </div>
        <hr>
        {% for field in fields %}
            <div class="columns is-gapless is-0 mt-2 mb-2">
                <div class="column">
                    <strong class="is-capitalized">{{ instance|verbose_name:field }}</strong>
                </div>
                <div class="column is-three-quarters">
                    {{ instance|getattr:field }}
                </div>
            </div>
            {% if not forloop.last %}
                <div class="is-divider mt-0 mb-0"></div>
            {% endif %}
        {% endfor %}
    </div>
    {% block extra_content %}
    {% endblock extra_content %}
{% endblock content %}


{% block footer %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@0.2.0/dist/css/bulma-divider.min.css">
{% endblock %}