{% extends "main/layout.html" %}
{% from 'global_macros.html' import data, preload_circle, select %}
{% from 'main/macros.html' import GridViewApp, ListViewApp %}

{% block page_vendor_css %}
{% endblock page_vendor_css %}

{% block page_lvl_css %}
    {{ process_css_sources(src="main/home.css")|safe }}
    {% if settings.background and settings.background != 'None' %}
        <style>
            #main {
                background-image: url("{{ settings.background }}");
                background-size: cover;
                background-attachment: fixed;
                min-height: 100vh;
            }
        </style>
    {% endif %}
{% endblock page_lvl_css %}

{% block content %}
    <div id="main" class="main-full">
        <div class="container">
            <div class="row card-filter-container">
                <div class="col s12 l4 input-field">
                    <span>
                        <i class="material-icons prefix card-search-icon">search</i>
                        <input type="text" id="apps-filter" class="card-filter theme-surface-transparent" placeholder="Search apps" autofocus>

                        {% if current_user.is_authenticated %}
                            {% if current_user.home_view_mode == "list" %}
                                <a href="{{ url_for('main.change_home_view_mode', mode="grid", user_id=current_user.id) }}">
                                <i class="material-icons right filter-action pointer">apps</i>
                            </a>
                            {% else %}
                                <a href="{{ url_for('main.change_home_view_mode', mode="list", user_id=current_user.id) }}">
                                <i class="material-icons right filter-action pointer">list</i>
                            </a>
                            {% endif %}
                        {% endif %}
                    </span>
                </div>
                {% if tags_form.tags.choices|count > 1 %}
                    <div class="input-field col s12 l2 tags-select-col theme-surface-transparent">
                        {{ tags_form.tags(id='tags-select') }}
                    </div>
                {% endif %}
            </div>
            <div class="row">
                {% if apps %}
                    {# If tags are enabled, render the apps like this #}
                    {% if tags_form.tags.choices|count > 1 %}
                        {% if settings.home_view_mode == "list" or current_user.home_view_mode == "list" %}

                            <div class="col s12 m12 l8">
                                <div id="list-view-collection" class="collection">
                                    {% for tag in tags_form.tags.choices %}
                                        {% if tag[0] != 'All tags' %}
                                            <div class="tag-group" data-tag="{{ tag[0] }}">
                                                <a class="collection-item font-weight-600 theme-on-primary-text theme-primary" style="font-size: 1.2em">{{ tag[0] }}</a>
                                                {% for app in apps %}
                                                    {% if app.tags and tag[0] in app.tags %}
                                                        {{ ListViewApp(app) }}
                                                    {% endif %}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>

                        {% else %}
                            {% for tag in tags_form.tags.choices %}
                                {% if tag[0] != 'All tags' %}
                                    <div class="tag-group" data-tag="{{ tag[0] }}">
                                        <div class="row">
                                            <div class="col s12 m6 l2">
                                                <div class="card center-align theme-primary">
                                                    <h5 class="theme-on-primary-text">{{ tag[0] }}</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            {% for app in apps %}
                                                {% if app.tags and tag[0] in app.tags %}
                                                    {{ GridViewApp(app) }}
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                        <div class="divider"></div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                    {% else %}
                        {# otherwise, render the apps like this #}
                        {% if settings.home_view_mode == "list" or current_user.home_view_mode == "list" %}
                            <div class="col s12 m12 l8">
                                <div id="list-view-collection" class="collection">
                                    {% for app in apps %}
                                        {{ ListViewApp(app) }}
                                    {% endfor %}
                                </div>
                            </div>

                        {% else %}
                            {% for app in apps %}
                                {{ GridViewApp(app) }}
                            {% endfor %}
                        {% endif %}
                    {% endif %}


                {% else %}
                    <a href="{{ url_for('settings_system.settings') }}">
                        <div class="col s12 m6 l3">
                            <div class="card theme-surface-transparent">
                                <div class="card-action center-align">
                                    <h5>No apps yet, go to settings.</h5>
                                </div>
                            </div>
                        </div>
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}

{% block page_vendor_js %}
{% endblock page_vendor_js %}

{% block page_lvl_js %}
    {{ process_js_sources(src="main/home.js")|safe }}
{% endblock page_lvl_js %}