{% macro render_field(field, disabled_fields=[], exclude_fields=[], class='') %}
    {% set disabled = field.name in disabled_fields %}
    {% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}
    {% if field.name not in exclude_fields %}
        {% if field.type == 'BooleanField' %}
            <div class="form-check">
                {{ field(class="form-check-input " + class, type="checkbox", id="flexSwitchCheckDefault") }}
                {{ field.label(class="form-check-label", for="flexSwitchCheckDefault", disabled=disabled) }}
            </div>
        {% else %}
            <div class="form-group">
                {{ field.label(class="form-label") }}
                {{ field(class="form-control " + class, disabled=disabled) }}
                {% if field.errors %}
                    <div class="invalid-feedback">
                        {% for error in field.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
{% endmacro %}

{% macro render_included_field(field, disabled_fields=[], include_fields=[]) %}
    {% set disabled = field.name in disabled_fields %}
    {% if field.name in include_fields %}
        {% if field.type == 'BooleanField' %}
            <div class="form-check">
                {{ field(class="form-check-input", type="checkbox", id="flexSwitchCheckDefault") }}
                {{ field.label(class="form-check-label", for="flexSwitchCheckDefault", disabled=disabled) }}
            </div>
        {% else %}
            <div class="form-group">
                {{ field.label(class="form-label") }}
                {{ field(class="form-control", disabled=disabled) }}
                {% if field.errors %}
                    <div class="invalid-feedback">
                        {% for error in field.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
{% endmacro %}

{% macro render_table(headers, rows) %}
<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0">
      <thead>
        <tr>
          {% for header in headers %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          <tr>
            {% for cell in row %}
              <td class="{{ cell.class }}">
                {% if cell.type == 'image' %}
                  <div class="d-flex px-2 py-1">
                    <div>
                      <img src="{{ cell.value }}" class="avatar avatar-sm me-3">
                    </div>
                  </div>
                {% elif cell.type == 'text' %}
                  <p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
                {% elif cell.type == 'badge' %}
                  <span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
                {% elif cell.type == 'link' %}
                  <a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
                {% else %}
                  {{ cell.value }}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro render_selectable_table(headers, rows, selectable, id) %}
<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0" id="{{ id }}">
      <thead>
        <tr>
          {% if selectable %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Select</th>
          {% endif %}
          {% for header in headers %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          <tr>
            {% if selectable %}
              <td><input type="radio" name="selected_row" value="{{ row[0] }}" required></td>
            {% endif %}
            {% for cell in row %}
              <td class="{{ cell.class }}">
                {% if cell.type == 'image' %}
                  <div class="d-flex px-2 py-1">
                    <div>
                      <img src="{{ cell.value }}" class="avatar avatar-sm me-3">
                    </div>
                  </div>
                {% elif cell.type == 'text' %}
                  <p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
                {% elif cell.type == 'badge' %}
                  <span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
                {% elif cell.type == 'link' %}
                  <a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
                {% else %}
                  {{ cell.value }}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro render_selectable_sortable_table(headers, rows, selectable, id, sort_by, sort_order) %}
<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0" id="{{ id }}">
        <thead>
            <tr>
                {% if selectable %}
                    <th>Select</th>
                {% endif %}
                {% for header in headers %}
                    <th class="sortable" data-sort="{{ header|lower|replace(' ', '_') }}">
                        {{ header }}
                        {% if sort_by == header|lower|replace(' ', '_') %}
                            {% if sort_order == 'asc' %}
                                <i class="fas fa-sort-up"></i>
                            {% elif sort_order == 'desc' %}
                                <i class="fas fa-sort-down"></i>
                            {% endif %}
                        {% else %}
                            <i class="fas fa-sort"></i>
                        {% endif %}
                    </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
                <tr>
                    {% if selectable %}
                        <td><input type="radio" name="selected_row" value="{{ row[0].value }}"></td>
                    {% endif %}
                    {% for cell in row %}
                        <td>{{ cell.value }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro render_selectable_sortable_table_with_dict_headers(headers, rows, selectable, id, sort_by, sort_order) %}
<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0" id="{{ id }}">
      <thead>
        <tr>
          {% if selectable %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Select</th>
          {% endif %}
          {% for header in headers %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 sortable" data-sort="{{ header['sort'] }}">
              {{ header['text'] }}
              {% if sort_by == header['sort'] %}
                {% if sort_order == 'asc' %}
                  <i class="fas fa-sort-up"></i>
                {% elif sort_order == 'desc' %}
                  <i class="fas fa-sort-down"></i>
                {% endif %}
              {% else %}
                <i class="fas fa-sort"></i>
              {% endif %}
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          <tr>
            {% if selectable %}
              <td><input type="radio" name="selected_row" value="{{ row[0].value }}"></td>
            {% endif %}
            {% for cell in row %}
              <td>{{ cell.value }}</td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro render_accordion(accordion_id, accordion_items, header_title, header_description) %}
<div class="accordion-1">
  <div class="container">
    <div class="row my-5">
      <div class="col-md-6 mx-auto text-center">
        <h2>{{ header_title }}</h2>
        <p>{{ header_description }}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-10 mx-auto">
        <div class="accordion" id="{{ accordion_id }}">
          {% for item in accordion_items %}
          <div class="accordion-item mb-3">
            <h5 class="accordion-header" id="heading{{ loop.index }}">
              <button class="accordion-button border-bottom font-weight-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                {{ item.title }}
                <i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
                <i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
              </button>
            </h5>
            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#{{ accordion_id }}">
              <div class="accordion-body text-sm opacity-8">
                {{ item.content }}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{% macro render_nested_table(headers, rows) %}
<div class="">
  <div class="table-responsive">
    <table class="table align-items-center mb-0">
      <thead>
        <tr>
          {% for header in headers %}
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          <tr>
            {% for cell in row %}
              {% if cell.is_group %}
                <td colspan="{{ cell.colspan }}" class="{{ cell.class }}">
                  {{ render_nested_table(cell.headers, cell.sub_rows) }}
                </td>
              {% else %}
                <td class="{{ cell.class }}">
                  {% if cell.type == 'image' %}
                    <div class="d-flex px-2 py-1">
                      <div>
                        <img src="{{ cell.value }}" class="avatar avatar-sm me-3">
                      </div>
                    </div>
                  {% elif cell.type == 'text' %}
                    <p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
                  {% elif cell.type == 'badge' %}
                    <span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
                  {% elif cell.type == 'link' %}
                    <a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
                  {% else %}
                    {{ cell.value }}
                  {% endif %}
                </td>
              {% endif %}
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro render_pagination(pagination, endpoint) %}
<nav aria-label="Page navigation">
  <ul class="pagination">
    <!-- Previous Button -->
    <li class="page-item {{ 'disabled' if not pagination.has_prev }}">
      <a class="page-link" href="{{ url_for(endpoint, page=pagination.prev_num) if pagination.has_prev else 'javascript:;' }}" tabindex="-1">
        <span class="material-symbols-outlined">keyboard_double_arrow_left</span>
{#        <span class="sr-only">Previous</span>#}
      </a>
    </li>

    <!-- Page Number Buttons -->
    {% for page in pagination.iter_pages(left_edge=1, left_current=2, right_current=3, right_edge=1) %}
      <li class="page-item {{ 'active' if page == pagination.page }}">
        <a class="page-link" href="{{ url_for(endpoint, page=page) }}">
          {% if page == pagination.page %}
            <span class="material-symbols-outlined">target</span>
{#            <span class="sr-only">(current)</span>#}
          {% else %}
            {{ page }}
          {% endif %}
        </a>
      </li>
    {% endfor %}

    <!-- Next Button -->
    <li class="page-item {{ 'disabled' if not pagination.has_next }}">
      <a class="page-link" href="{{ url_for(endpoint, page=pagination.next_num) if pagination.has_next else 'javascript:;' }}">
        <span class="material-symbols-outlined">keyboard_double_arrow_right</span>
{#        <span class="sr-only">Next</span>#}
      </a>
    </li>
  </ul>
</nav>
{% endmacro %}

{% macro render_filter_field(field_name, label, options, current_value) %}
<div class="form-group">
    <label for="{{ field_name }}">{{ label }}</label>
    <select class="form-control" id="{{ field_name }}" name="{{ field_name }}">
        <option value="">All</option>
        {% for value, text in options %}
            <option value="{{ value }}" {% if value == current_value %}selected{% endif %}>{{ text }}</option>
        {% endfor %}
    </select>
</div>
{% endmacro %}

{% macro render_date_filter_field(field_name, label, current_value) %}
<div class="form-group">
    <label for="{{ field_name }}">{{ label }}</label>
    <input type="date" class="form-control" id="{{ field_name }}" name="{{ field_name }}" value="{{ current_value }}">
</div>
{% endmacro %}

{% macro render_collapsible_section(id, title, content) %}
<div class="accordion" id="accordion{{ id }}">
    <div class="accordion-item mb-3">
        <h5 class="accordion-header" id="heading{{ id }}">
            <button class="accordion-button border-bottom font-weight-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ id }}" aria-expanded="false" aria-controls="collapse{{ id }}">
                {{ title }}
                <i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
                <i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
            </button>
        </h5>
        <div id="collapse{{ id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ id }}" data-bs-parent="#accordion{{ id }}">
            <div class="accordion-body text-sm opacity-8">
                {{ content }}
            </div>
        </div>
    </div>
</div>
{% endmacro %}