{% macro alert(title, message, tone='info') %}
<div class="alert alert-{{ tone }}" role="alert">
  <h4 class="alert-title">{{ title }}</h4>
  <div class="text-secondary">{{ message }}</div>
</div>
{% endmacro %}

{% macro badge(text, tone='secondary') %}
<span class="badge bg-{{ tone }} text-{{ 'white' if tone in ['danger', 'primary', 'dark'] else 'dark' }}">
  {{ text }}
</span>
{% endmacro %}

{% macro breadcrumb(items) %}
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    {% for item in items %}
    <li class="breadcrumb-item{% if not item.href %} active{% endif %}"{% if not item.href %} aria-current="page"{% endif %}>
      {% if item.href %}
      <a href="{{ item.href }}">{{ item.title }}</a>
      {% else %}
      {{ item.title }}
      {% endif %}
    </li>
    {% endfor %}
  </ol>
</nav>
{% endmacro %}

{% macro button(label, tone='primary', button_type='button') %}
<button type="{{ button_type }}" class="btn btn-{{ tone }}">{{ label }}</button>
{% endmacro %}

{% macro button_group(labels) %}
<div class="btn-group" role="group" aria-label="Button group">
  {% for label in labels %}
  {{ button(label=label, tone='outline-primary') }}
  {% endfor %}
</div>
{% endmacro %}

{% macro card(body) %}
<div class="card">
  <div class="card-body">{{ body }}</div>
</div>
{% endmacro %}

{% macro card_header(title, subtitle='') %}
<div class="card-header">
  <div>
    <h3 class="card-title mb-0">{{ title }}</h3>
    {% if subtitle %}
    <p class="text-secondary mb-0">{{ subtitle }}</p>
    {% endif %}
  </div>
</div>
{% endmacro %}

{% macro dropdown(label, items) %}
<div class="dropdown">
  <button
    class="btn btn-outline-secondary dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    {{ label }}
  </button>
  <div
    class="dropdown-menu show beeui-catalog-dropdown"
    role="menu"
    aria-label="Dropdown preview"
  >
    {% for item in items %}
    <span class="dropdown-item">{{ item }}</span>
    {% endfor %}
  </div>
</div>
{% endmacro %}

{% macro empty_state(title, subtitle) %}
<div class="empty beeui-empty-state" role="status" aria-live="polite">
  <div class="empty-header">{{ title }}</div>
  <p class="empty-subtitle text-secondary">{{ subtitle }}</p>
</div>
{% endmacro %}

{% macro modal_shell(title, body) %}
<div
  class="modal beeui-catalog-modal-shell"
  role="dialog"
  aria-modal="true"
  aria-label="{{ title }}"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ title }}</h5>
      </div>
      <div class="modal-body">{{ body }}</div>
      <div class="modal-footer">
        {{ button(label='Закрыть' if locale == 'ru' else 'Close', tone='secondary') }}
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{% macro tabs(items, active_id) %}
<ul class="nav nav-tabs" role="tablist">
  {% for tab in items %}
  <li class="nav-item" role="presentation">
    <span
      class="nav-link{% if tab.id == active_id %} active{% endif %}"
      role="tab"
      aria-selected="{{ 'true' if tab.id == active_id else 'false' }}"
    >
      {{ tab.title }}
    </span>
  </li>
  {% endfor %}
</ul>
{% endmacro %}

{% macro url_tabs(items, active_id, base_url='', tab_class='nav nav-tabs card-header-tabs', active_param='tab') %}
<ul class="{{ tab_class }}" role="tablist">
  {% for tab in items %}
  {% set tab_href = tab.href if tab.href else (base_url ~ '?' ~ active_param ~ '=' ~ tab.id) %}
  <li class="nav-item" role="presentation">
    {% if tab.disabled %}
    <span class="nav-link disabled" role="tab" aria-disabled="true">
      {{ tab.title }}
    </span>
    {% else %}
    <a
      href="{{ tab_href }}"
      class="nav-link{% if tab.id == active_id %} active{% endif %}"
      role="tab"
      aria-selected="{{ 'true' if tab.id == active_id else 'false' }}"
      {% if tab.id == active_id %}aria-current="page"{% endif %}
    >
      {{ tab.title }}
    </a>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

{% macro table(columns, rows) %}
<div class="table-responsive">
  <table class="table table-vcenter card-table">
    <thead>
      <tr>
        {% for column in columns %}
        <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        {% for value in row %}
        <td>{{ value }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro data_grid(columns, rows) %}
<div class="table-responsive">
  <table class="table table-striped table-hover" aria-label="Data grid">
    <thead>
      <tr>
        {% for column in columns %}
        <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        {% for column in columns %}
        <td>{{ row[column] }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro form_input(label, value='', input_type='text', placeholder='') %}
<div class="mb-3">
  <label class="form-label">{{ label }}</label>
  <input
    class="form-control"
    type="{{ input_type }}"
    value="{{ value }}"
    placeholder="{{ placeholder }}"
    readonly
  />
</div>
{% endmacro %}

{% macro form_select(label, options) %}
<div class="mb-3">
  <label class="form-label">{{ label }}</label>
  <select class="form-select" aria-label="{{ label }}" disabled>
    {% for option in options %}
    <option>{{ option }}</option>
    {% endfor %}
  </select>
</div>
{% endmacro %}

{% macro form_checkbox(label, checked=False) %}
<label class="form-check mb-2">
  <input
    class="form-check-input"
    type="checkbox"
    {% if checked %}checked{% endif %}
    disabled
  />
  <span class="form-check-label">{{ label }}</span>
</label>
{% endmacro %}

{% macro form_radio(name, label, checked=False) %}
<label class="form-check mb-2">
  <input
    class="form-check-input"
    type="radio"
    name="{{ name }}"
    {% if checked %}checked{% endif %}
    disabled
  />
  <span class="form-check-label">{{ label }}</span>
</label>
{% endmacro %}

{% macro form_textarea(label, value='') %}
<div class="mb-3">
  <label class="form-label">{{ label }}</label>
  <textarea class="form-control" rows="3" readonly>{{ value }}</textarea>
</div>
{% endmacro %}

{% macro form_selectgroup(options) %}
<div class="form-selectgroup">
  {% for option in options %}
  <label class="form-selectgroup-item">
    <input type="checkbox" class="form-selectgroup-input" disabled />
    <span class="form-selectgroup-label">{{ option }}</span>
  </label>
  {% endfor %}
</div>
{% endmacro %}

{% macro pagination(page, total_pages) %}
<ul class="pagination">
  <li class="page-item{% if page <= 1 %} disabled{% endif %}">
    <span class="page-link">{% if locale == 'ru' %}Назад{% else %}Prev{% endif %}</span>
  </li>
  <li class="page-item active">
    <span class="page-link">{{ page }}</span>
  </li>
  <li class="page-item disabled">
    <span class="page-link">/{{ total_pages }}</span>
  </li>
  <li class="page-item{% if page >= total_pages %} disabled{% endif %}">
    <span class="page-link">{% if locale == 'ru' %}Вперёд{% else %}Next{% endif %}</span>
  </li>
</ul>
{% endmacro %}

{% macro progress(value, label='') %}
<div class="mb-2">
  {% if label %}
  <div class="text-secondary small mb-1">{{ label }}</div>
  {% endif %}
  <progress class="beeui-progress-native mb-2" value="{{ value }}" max="100">
    {{ value }}%
  </progress>
  <div class="beeui-progress-value">{{ value }}%</div>
</div>
{% endmacro %}

{% macro status_dot(status, label='') %}
<span
  class="status-dot status-dot-animated{% if status in ['ok', 'success'] %} bg-success{% elif status in ['warning', 'degraded', 'partial'] %} bg-yellow{% else %} bg-red{% endif %}"
></span>
{% if label %}
<span class="ms-1">{{ label }}</span>
{% endif %}
{% endmacro %}

{% macro avatar_placeholder(text) %}
<span class="avatar bg-azure-lt">{{ text }}</span>
{% endmacro %}

{% macro toast_placeholder(title, message) %}
<div class="toast show beeui-catalog-toast" role="status" aria-live="polite">
  <div class="toast-header">
    <strong class="me-auto">{{ title }}</strong>
  </div>
  <div class="toast-body">{{ message }}</div>
</div>
{% endmacro %}

{% macro offcanvas_shell(title, body) %}
<div
  class="offcanvas offcanvas-end show beeui-catalog-offcanvas"
  tabindex="-1"
  aria-modal="true"
  role="dialog"
  aria-label="{{ title }}"
>
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">{{ title }}</h5>
  </div>
  <div class="offcanvas-body">{{ body }}</div>
</div>
{% endmacro %}

{% macro chart_container(title) %}
<div
  class="beeui-plugin-placeholder"
  data-plugin="chart"
  aria-label="Chart placeholder"
>
  <h4 class="mb-1">{{ title }}</h4>
  <p class="text-secondary mb-0">
    {% if locale == 'ru' %}Неактивный заполнитель. Библиотека графиков не загружена.{% else %}Inert placeholder. No runtime chart library is loaded.{% endif %}
  </p>
</div>
{% endmacro %}

{% macro map_container(title) %}
<div
  class="beeui-plugin-placeholder"
  data-plugin="map"
  aria-label="Map placeholder"
>
  <h4 class="mb-1">{{ title }}</h4>
  <p class="text-secondary mb-0">
    {% if locale == 'ru' %}Неактивный заполнитель. Внешний картографический провайдер не загружен.{% else %}Inert placeholder. No external maps provider is loaded.{% endif %}
  </p>
</div>
{% endmacro %}

{% macro datatable_container(title) %}
<div
  class="beeui-plugin-placeholder"
  data-plugin="datatable"
  aria-label="Datatable placeholder"
>
  <h4 class="mb-1">{{ title }}</h4>
  <p class="text-secondary mb-0">
    {% if locale == 'ru' %}Неактивный заполнитель. Внешний плагин таблиц не загружен.{% else %}Inert placeholder. No external datatable plugin is loaded.{% endif %}
  </p>
</div>
{% endmacro %}

{% macro accordion(items, accordion_id, accordion_class='accordion', accordion_variant='default') %}
<div class="{{ accordion_class }}" id="{{ accordion_id }}">
  {% for item in items %}
  <div class="accordion-item">
    <div class="accordion-header" id="{{ accordion_id }}-heading-{{ loop.index }}">
      <button
        class="accordion-button{% if not item.open %} collapsed{% endif %}"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#{{ accordion_id }}-collapse-{{ loop.index }}"
        aria-expanded="{{ 'true' if item.open else 'false' }}"
        aria-controls="{{ accordion_id }}-collapse-{{ loop.index }}"
      >
        {% if accordion_variant == 'icons' %}
        <div class="accordion-button-icon" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-1"
          >
            <path d="M9 15l6 -6" />
            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
            <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
          </svg>
        </div>
        {% endif %}

        {{ item.title }}

        {% if accordion_variant == 'inverted_plus' or 'accordion-plus' in accordion_class %}
        <div class="accordion-button-toggle accordion-button-toggle-plus" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-1"
          >
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg>
        </div>
        {% else %}
        <div class="accordion-button-toggle" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-1"
          >
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </div>
        {% endif %}
      </button>
    </div>
    <div
      id="{{ accordion_id }}-collapse-{{ loop.index }}"
      class="accordion-collapse collapse{% if item.open %} show{% endif %}"
      aria-labelledby="{{ accordion_id }}-heading-{{ loop.index }}"
      data-bs-parent="#{{ accordion_id }}"
    >
      <div class="accordion-body">
        {% if caller is defined %}
        {{ caller(item) }}
        {% elif item.body %}
        {{ item.body }}
        {% else %}
        <p class="text-secondary">No content available.</p>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endmacro %}