{% from 'global_macros.html' import preload_circle %}

{% macro AppAnchor(app, classes=None) %}
    {% if app.open_in == 'iframe' %}
        <a href="{{ url_for('main.app_view', app_id=app.id) }}" class="app-a {{ classes }}" data-name="{{ app.name }}" data-description="{{ app.description }}" data-tags="{{ app.tags }}">
    {% elif app.open_in == 'this_tab' %}
        <a href="{{ app.prefix }}{{ app.url }}" class="app-a {{ classes }}" data-name="{{ app.name }}" data-description="{{ app.description }}" data-tags="{{ app.tags }}">
    {% elif app.open_in == "new_tab" %}
        <a href="{{ app.prefix }}{{ app.url }}" target="_blank" class="app-a {{ classes }}" data-name="{{ app.name }}" data-description="{{ app.description }}" data-tags="{{ app.tags }}">
    {% endif %}
{% endmacro %}

{% macro GridViewApp(app) %}
    {{ AppAnchor(app) }}
    <div class="col s12 m6 l3">
        <div class="card theme-surface-transparent app-card">
            <div class="card-content center-align scrollbar" style="max-height: 118px; min-height: 118px; scrollbar-width: none;">
                {% if app.data_sources.count() > 0 %}
                    <div class="row">
                        <div class="col s6 center-align">
                            <img src="{{ app.icon }}" height="64px">
                        </div>

                        <div class="col s6 left-align">
                            <span class="data-source-loading">{{ preload_circle() }}</span>
                            {% for data_source in app.data_sources %}
                                <p class="data-source-container"
                                   data-url="{{ url_for('main.load_data_source') }}"
                                   data-id="{{ data_source.id }}">
                                </p>
                            {% endfor %}
                        </div>
                    </div>
                {% else %}
                    <img src="{{ app.icon }}" height="64px">
                {% endif %}
            </div>
            <div class="card-action center-align scrollbar" style="max-height: 127px; min-height: 127px; scrollbar-width: none;">
                <h5 class="app-name-{{ app.id }}">{{ app.name }}
                </h5>
                {% if app.description %}
                    <span class="theme-secondary-text">{{ app.description }}</span>
                {% else %}
                    <style>
                        .app-name-{{ app.id }} {
                            margin-top: 35px;
                        }
                    </style>
                {% endif %}
            </div>
        </div>
    </div>
    </a>
    {# </a> This closes AppAnchor() #}
{% endmacro %}

{% macro ListViewApp(apps) %}
    <div class="col s12 m12 l8">
        <div id="list-view-collection" class="collection">
            {% for app in apps %}
                {{ AppAnchor(app, classes="collection-item") }}
                <div class="row">
                    <div class="col s12
                        {% if app.data_sources.count() > 0 %}
                            l6
                        {% else %}
                            l12
                        {% endif %}">
                        <img src="{{ app.icon }}" class="app-icon">
                        <span class="theme-muted-text app-name">{{ app.name }}</span>
                        {% if app.description %}
                            <i class="material-icons-outlined tooltipped" data-position="top" data-tooltip="{{ app.description }}">info</i>
                        {% endif %}
                    </div>
                    <div class="col s12 l6 right-align">
                        {% if app.data_sources.count() > 0 %}
                            <span class="data-source-loading">{{ preload_circle() }}</span>
                            {% for data_source in app.data_sources %}
                                <span class="data-source-container theme-primary-text"
                                   data-url="{{ url_for('main.load_data_source') }}"
                                   data-id="{{ data_source.id }}">
                                </span>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
                </a>
                {# </a> This closes AppAnchor() #}
            {% endfor %}
        </div>
    </div>
{% endmacro %}