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

{% macro AppAnchor(app, classes=None, override=None) %}
    {% if override == 'iframe' or app.open_in == 'iframe' and override == None %}
        <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 override == 'this_tab' or app.open_in == 'this_tab' and override == None %}
        <a href="{{ app.prefix }}{{ app.url }}" class="app-a {{ classes }}" data-name="{{ app.name }}" data-description="{{ app.description }}" data-tags="{{ app.tags }}">
    {% elif override == 'new_tab' or app.open_in == "new_tab" and override == None %}
        <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 App(app) %}
    <div class="col s12 m6 l4 xl3 app-card">
        <div class="card theme-surface-transparent">
            {{ AppAnchor(app) }}
                <div class="card-content center-align scrollbar pt-3 pb-0" style="max-height: 86px; min-height: 86px; 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">
                                <div class="progress data-source-loading">
                                    <div class="indeterminate"></div>
                                </div>
                                {% 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>
            </a>
            <div class="card-action center-align scrollbar pr-0" style="max-height: 60px; min-height: 60px; scrollbar-width: none;">
                <span class="app-name-{{ app.id }} font-weight-900 card-title theme-primary-text searchable" style="font-size: 1.2rem">{{ app.name }}
                    <i class="material-icons activator right theme-secondary-text">more_vert</i>
                    {% if app.data_sources.count() > 0 %}
                        <i class="material-icons pointer right theme-secondary-text refresh-data-source-btn">refresh</i>
                    {% endif %}
                </span>
                <style>
                    .app-name-{{ app.id }} {
                        margin-top: 35px;
                    }
                </style>
            </div>
            <div class="card-reveal">
                <span class="card-title">{{ app.name }}<i class="material-icons right">close</i></span>
                {% if app.description %}
                    <p class="theme-secondary-text app-description searchable">{{ app.description|safe }}</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endmacro %}

{% macro Collection(app) %}
    <div class="col s12 m6 l4 xl3 app-card">
        <div class="card theme-surface-transparent scrollbar" style="max-height: 146px; min-height: 146px;">
            <div class="card-content">
                <span class="font-weight-900 card-title theme-primary-text">
                    {% if app.icon %}
                        <i class="material-icons-outlined right">{{app.icon}}</i>
                    {% endif %}
                    <text class="searchable">{{ app.name }}</text>
                </span>
                <div class="collection">
                    {% for url in app.urls_json %}

                        <div class="collection-item">
                            {% if url['icon'] %}
                                <img src="{{ url['icon'] }}" height="24px" class="mr-2" style="position: relative; top: 5px;">
                            {% endif %}
                            {% if url['open_in'] == 'this_tab' %}
                                <a href="{{ url['url'] }}" class="font-weight-700 searchable" style="font-size: 1.1rem">
                            {% else %}
                                <a href="{{ url['url'] }}" target="_blank" class="font-weight-700 searchable" style="font-size: 1.1rem">
                            {% endif %}
                                {{ url['name'] }}
                            </a>
                        </div>

                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro Custom(app) %}
    <div class="col s12 m6 l4 xl3 app-card">
        <div class="card theme-surface-transparent scrollbar" style="max-height: 146px; min-height: 146px;">
            <div class="hide searchable">{{ app.name }}</div>
            <div class="card-content">
                <div class="col s12">
                    <div class="progress data-source-loading">
                        <div class="indeterminate"></div>
                    </div>
                    {% 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>
        </div>
    </div>
{% endmacro %}