{% load i18n %}
<div class="page-content" data-accounting-active-tab="{{ accounting_active_tab }}">

    <div style="margin-bottom:1.5rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Операционный учёт" %}</h1>
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">
            {% trans "РРО, коммунальные услуги, энергооборудование, провайдеры и учёт рабочего времени" %}
        </p>
    </div>

    {% if accounting_tabs|length > 1 %}
    <div style="display:inline-flex; gap:0.25rem; background:var(--color-muted); border-radius:var(--radius); padding:0.25rem; margin-bottom:1.5rem; flex-wrap:wrap;">
        {% for tab_key, tab_label in accounting_tabs %}
        <a href="/accounting/?tab={{ tab_key }}"
           hx-get="/accounting/?tab={{ tab_key }}"
           hx-target="#main-content"
           hx-push-url="/accounting/?tab={{ tab_key }}"
           hx-indicator="#loader"
           class="accounting-tab-btn"
           data-tab="{{ tab_key }}"
           style="display:inline-flex; align-items:center; padding:0.375rem 0.875rem; font-size:0.8125rem; border-radius:calc(var(--radius) - 2px); font-weight:500; text-decoration:none; transition:all 150ms;{% if accounting_active_tab == tab_key %} background:var(--color-card); color:var(--color-card-foreground); box-shadow:0 1px 2px rgb(0 0 0/0.08);{% else %} color:var(--color-muted-foreground);{% endif %}">
            {{ tab_label }}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {% if accounting_active_tab == 'rro' %}
        {% include "pages/rro.html" %}
    {% elif accounting_active_tab == 'utilities' %}
        {% include "pages/utilities.html" %}
    {% elif accounting_active_tab == 'power' %}
        {% include "pages/power-assets.html" %}
    {% elif accounting_active_tab == 'timetrack' %}
        {% include "pages/timetrack.html" %}
    {% elif accounting_active_tab == 'internet' %}
        {% include "pages/internet-billing.html" %}
    {% endif %}

</div>