{% import "adminlte_full/macros/bootstrap4.html" as bootstrap %}


{% macro render_card_wrapper(content=none,
                             card_id='',
                             color='default',
                             bg_color='',
                             outline=false,
                             card_class='') %}
  <div class="card card-{{ color }} bg-{{ bg_color }}{% if outline %} card-outline{% endif %} {{ card_class }}" id="{{ card_id }}">
    {% if content is none %}{{ caller() }}{% else %}{{ content }}{% endif %}
  </div>
{% endmacro %}


{% macro render_card_tools(maximizable=false,
                           collapsable=false,
                           expandable=false,
                           closable=false,
                           data_source=none,
                           refreshable_options='') %}
  <div class="card-tools">
    {% if data_source %}
      <button type="button" class="btn btn-tool" data-card-widget="card-refresh" data-source="{{ data_source }}" {{ refreshable_options | safe }}>
        <i class="fas fa-sync-alt"></i>
      </button>
    {% endif %}
    {% if maximizable %}
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
    {% endif %}
    {% if collapsable or expandable %}
      <button type="button" class="btn btn-tool" data-card-widget="collapse">
        <i class="fas {% if expandable %}fa-plus{% else %}fa-minus{% endif %}"></i>
      </button>
    {% endif %}
    {% if closable %}
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    {% endif %}
  </div>
{% endmacro %}


{% macro render_card(title='',
                     content=none,
                     body=none,
                     body_class='',
                     card_id='',
                     card_class='',
                     color='default',
                     bg_color='',
                     outline=false,
                     maximizable=false,
                     collapsable=false,
                     expandable=false,
                     closable=false,
                     data_source=none,
                     refreshable_options='',
                     overlay=false,
                     overlay_dark=false) %}
  {% if expandable %}
    {% set card_class = card_class + ' collapsed-card' %}
  {% endif %}

  {% if body is not none %}
    {% set content %}
      <div class="card-body{% if body_class %} {{ body_class }}{% endif %}">
        {{ body }}
      </div>
    {% endset %}
  {% elif content is none %}
    {% set content = caller() %}
  {% endif %}

  {% call render_card_wrapper(card_id=card_id, card_class=card_class, color=color, bg_color=bg_color, outline=outline) %}
    <div class="card-header">
      <h3 class="card-title">{{ title }}</h3>
      {{ render_card_tools(maximizable=maximizable,
                           collapsable=collapsable,
                           expandable=expandable,
                           closable=closable,
                           data_source=data_source,
                           refreshable_options=refreshable_options)
      }}
    </div>
    {{ content }}
    {% if overlay or overlay_dark %}
      <div class="overlay{% if overlay_dark %} dark{% endif %}">
        <i class="fas fa-2x fa-sync-alt"></i>
      </div>
    {% endif %}
  {% endcall %}
{% endmacro %}


{% macro render_info_box(text, number, icon, color='', bg_color='', progress=none, progress_description='') %}
  <div class="info-box{% if bg_color %} bg-{{ bg_color }}{% endif %}">
    <span class="info-box-icon{% if color %} bg-{{ color }}{% endif %}"><i class="{{ icon }}"></i></span>

    <div class="info-box-content">
      <span class="info-box-text">{{ text }}</span>
      <span class="info-box-number">{{ number }}</span>

      {% if progress is not none %}
        <div class="progress">
          <div class="progress-bar" style="width: {{ progress }}%"></div>
        </div>
        {% if progress_description %}
          <span class="progress-description">{{ progress_description }}</span>
        {% endif %}
      {% endif %}
    </div>
  </div>
{% endmacro %}


{% macro render_small_box(title, text, icon, url='', color='', overlay=false, overlay_dark=false) %}
  <div class="small-box{% if color %} bg-{{ color }}{% endif %}">
    {% if overlay or overlay_dark %}
      <div class="overlay{% if overlay_dark %} dark{% endif %}">
        <i class="fas fa-3x fa-sync-alt"></i>
      </div>
    {% endif %}
    <div class="inner">
      <h3>{{ title|safe }}</h3>
      <p>{{ text|safe }}</p>
    </div>
    <div class="icon">
      <i class="{{ icon }}"></i>
    </div>
    {% if url %}
      <a href="{{ url }}" class="small-box-footer">
        More info <i class="fas fa-arrow-circle-right"></i>
      </a>
    {% endif %}
  </div>
{% endmacro %}


{% macro render_table(data, headers=none, footer=false, auto_number=false, table_id='', table_class='') %}
  {% set table_header %}
    {% if headers %}
      <tr>
        {% if auto_number %}<th style="width: 1em">#</th>{% endif %}
        {% if headers is mapping %}
          <th>{{ headers.values() | join('</th><th>' | safe) }}</th>
        {% else %}
          <th>{{ headers | join('</th><th>' | safe) }}</th>
        {% endif %}
      </tr>
    {% endif %}
  {% endset %}
  <table id="{{ table_id }}" class="table {{ table_class }}">
    <thead>{{ table_header }}</thead>
    <tbody>
      {% for row in data %}
        <tr>
          {% if auto_number %}<td>{{ loop.index }}</td>{% endif %}
          {{ caller(row) }}
        </tr>
      {% endfor %}
    </tbody>
    {% if footer %}<tfoot>{{ table_header }}</tfoot>{% endif %}
  </table>
{% endmacro %}


{% macro render_data_table(data, headers=none, footer=false, auto_number=false, table_id='', table_class='') %}
  {% call(row) render_table(data=data, headers=headers, footer=footer, auto_number=auto_number, table_id=table_id, table_class=table_class) %}
    {% if headers is mapping %}
      {% for col in headers %}
        <td>{{ row[col] }}</td>
      {% endfor %}
    {% else %}
      {% for col in row %}
        <td>{{ col }}</td>
      {% endfor %}
    {% endif %}
  {% endcall %}
{% endmacro %}