{% macro render_field(field, disabled_fields=[], exclude_fields=[]) %}
    {% 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", 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_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_seamless_table(headers, rows) %}
{% macro render_integrated_table(headers, data) %}
<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 entry in data %}
        {% if entry.is_group and entry.sub_rows %}
          {% for sub_row in entry.sub_rows %}
            <tr>
              {% for cell in sub_row %}
                {% if cell %}
                  <td class="{{ cell.class }}">
                    {% if cell.type == 'text' %}
                      <p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
                    {% else %}
                      {{ cell.value }}
                    {% endif %}
                  </td>
                {% else %}
                  <td></td>
                {% endif %}
              {% endfor %}
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            {% for cell in entry %}
              <td class="{{ cell.class }}">
                {% if cell.type == 'text' %}
                  <p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
                {% else %}
                  {{ cell.value }}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}
{% endmacro %}

{% macro render_pagination(pagination, endpoint) %}
<nav aria-label="Page navigation">
  <ul class="pagination">
    <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">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    {% 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) }}">{{ page }} {% if page == pagination.page %}<span class="sr-only">(current)</span>{% endif %}</a>
      </li>
    {% endfor %}
    <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:;' }}">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>
{% endmacro %}