{% extends "app_base.html" %}
{% load djicons %}

{% block main %}
<div class="page">
    {# Page header #}
    <header class="page-header">
        <div class="page-header-left">
            <h1 class="page-title">{% block page_title %}{% endblock %}</h1>
        </div>
        <div class="page-header-right">
            {% block page_actions %}{% endblock %}
        </div>
    </header>

    {# Content area (HTMX target) #}
    <div id="main-content-area" class="page-content">
        {% block content %}{% endblock %}
    </div>

    {# Footer tabbar #}
    {% if navigation %}
    <nav class="tabbar">
        {% for item in navigation %}
        <a href="{{ item.url|default:'#' }}"
           class="tabbar-item {% if item.active %}active{% endif %}"
           {% if item.url %}hx-get="{{ item.url }}" hx-target="#main-content-area" hx-push-url="true"{% endif %}>
            {% if item.icon %}{% icon item.icon %}{% endif %}
            <span>{{ item.label }}</span>
        </a>
        {% endfor %}
    </nav>
    {% endif %}
</div>
{% endblock %}