{% macro render_field_content(field, disabled=False, readonly=False, class='') %}
    {% if field.type == 'BooleanField' %}
        <div class="form-group">
            <div class="form-check form-switch">
                {{ field(class="form-check-input " + class, disabled=disabled, readonly=readonly, required=False) }}
                {% if field.description %}
                    {{ field.label(class="form-check-label",
                                 **{'data-bs-toggle': 'tooltip',
                                    'data-bs-placement': 'right',
                                    'title': field.description}) }}
                    {% if field.flags.required %}
                        <span class="required-field-indicator" aria-hidden="true">
                            <i class="material-symbols-outlined required-icon">check_circle</i>
                        </span>
                        <span class="visually-hidden">Required field</span>
                    {% endif %}
                {% else %}
                    {{ field.label(class="form-check-label") }}
                    {% if field.flags.required %}
                        <span class="required-field-indicator" aria-hidden="true">
                            <i class="material-symbols-outlined required-icon">check_circle</i>
                        </span>
                        <span class="visually-hidden">Required field</span>
                    {% endif %}
                {% endif %}
            </div>
            {% if field.errors %}
                <div class="invalid-feedback d-block">
                    {% for error in field.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    {% else %}
        <div class="form-group">
            {% if field.description %}
                {{ field.label(class="form-label",
                             **{'data-bs-toggle': 'tooltip',
                                'data-bs-placement': 'right',
                                'title': field.description}) }}
                {% if field.flags.required %}
                    <span class="required-field-indicator" aria-hidden="true">
                        <i class="material-symbols-outlined required-icon">check_circle</i>
                    </span>
                    <span class="visually-hidden">Required field</span>
                {% endif %}
            {% else %}
                {{ field.label(class="form-label") }}
                {% if field.flags.required %}
                    <span class="required-field-indicator" aria-hidden="true">
                        <i class="material-symbols-outlined required-icon">check_circle</i>
                    </span>
                    <span class="visually-hidden">Required field</span>
                {% endif %}
            {% endif %}

            {% if field.type == 'TextAreaField' and 'json-editor' in class %}
                <div id="{{ field.id }}-editor" class="json-editor-container"></div>
                {{ field(class="form-control d-none " + class, disabled=disabled, readonly=readonly) }}
            {% elif field.type == 'SelectField' %}
                {{ field(class="form-control form-select " + class, disabled=disabled, readonly=readonly) }}
            {% else %}
                {{ field(class="form-control " + class, disabled=disabled, readonly=readonly) }}
            {% endif %}

            {% if field.errors %}
                <div class="invalid-feedback d-block">
                    {% for error in field.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endmacro %}


{% macro render_field(field, disabled_fields=[], readonly_fields=[], exclude_fields=[], class='') %}
    <!-- Debug info -->
    <!-- Field name: {{ field.name }}, Field type: {{ field.__class__.__name__ }} -->

    {% set disabled = field.name in disabled_fields %}
    {% set readonly = field.name in readonly_fields %}
    {% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}
    {% if field.name not in exclude_fields %}
        {{ render_field_content(field, disabled, readonly, class) }}
    {% endif %}
{% endmacro %}

{% macro render_included_field(field, disabled_fields=[], readonly_fields=[], include_fields=[], class='') %}
    {% set disabled = field.name in disabled_fields %}
    {% set readonly = field.name in readonly_fields %}
    {% if field.name in include_fields %}
        {{ render_field_content(field, disabled, readonly, class) }}
    {% 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, is_component_selector=False) %}
<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] }}"
                         {% if is_component_selector %}
                           data-component-selector="true"
                         {% endif %}>
              </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>#}
{#      </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>#}
{#          {% 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_pagination(pagination, endpoint) %}
    {# Deze macro is een wrapper rond de globale get_pagination_html functie #}
    {# Ondersteunt nu expliciet een session_id parameter #}
    {{ get_pagination_html(pagination, endpoint) }}
{% 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 %}