{% extends "main/layout.html" %}
{% from 'global_macros.html' import input, button, select %}
{% from 'main/tcdrop.html' import tcdrop %}
{% from 'settings_system/files.html' import FilesTab with context %}
{% block page_vendor_css %}
{% endblock page_vendor_css %}

{% block page_lvl_css %}
    {{ process_css_sources(src="settings_system/settings.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">
                <div class="col s12 m12 l6">
                    <div class="card">
                        <div class="card-content">
                            <div class="row">
                                <div class="col s12">
                                    <span>
                                        <span style="font-size: 2rem; position: relative; top: 8px;">Config.ini</span>
                                        {{ button(
                                        icon="save",
                                        id="save-config-btn",
                                        float="right",
                                        class="ml-0 mt-1 mb-1",
                                        data={'url': url_for('settings_system.save_config')},
                                        text="save"
                                        ) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-action scrollbar settings-page-card-left">
                            <form id="config-form">
                                {{ input(
                                size="s12",
                                class="materialize-textarea code",
                                form_obj=config_form.config,
                                id="config-textarea"
                                ) }}
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col s12 m12 l6">
                    <div class="card">
                        <div class="card-content pr-2">

                            <div class="row">
                                <div class="col s12 mb-2">
                                    <ul class="tabs tabs-fixed-width">
                                        <li class="tab col s3"><a href="#settings-readme">
                                            <i class="material-icons-outlined">settings</i>
                                        </a></li>

                                        <li class="tab col s3"><a href="#cards-readme">
                                            <i class="material-icons-outlined">aspect_ratio</i>
                                        </a></li>

                                        <li class="tab col s3"><a href="#data-sources-readme">
                                            <i class="material-icons-outlined">language</i>
                                        </a></li>

                                        <li class="tab col s3"><a href="#images">
                                            <i class="material-icons-outlined">photo_library</i>
                                        </a></li>

                                        <li class="tab col s3"><a href="#about">
                                            <i class="material-icons-outlined">security</i>
                                        </a></li>
                                    </ul>
                                </div>

                                <div id="images" class="col s12 scrollbar settings-page-card-right">
                                    {{ FilesTab() }}
                                </div>

                                <div id="settings-readme" class="col s12 scrollbar settings-page-card-right scrollbar-x">
                                    {{ config_readme['settings']|safe }}
                                </div>

                                <div id="cards-readme" class="col s12 scrollbar settings-page-card-right scrollbar-x">
                                    <h4>Cards</h4>
                                    <h5>Card Templates</h5>
                                    <span>Search for preconfigured cards included with DashMachine.</span>
                                    <div class="row card-filter-container" style="position: relative;">
                                        <div class="col s12 input-field">
                                            <span>
                                                <i class="material-icons prefix card-search-icon">search</i>
                                                <input type="text" id="templates-filter"
                                                       class="card-filter theme-surface-1 autocomplete"
                                                       data-url="{{ url_for('settings_system.get_app_template') }}"
                                                       data-template_apps="{{ template_apps }}"
                                                       placeholder="Search for app (e.g. Nextcloud)">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col s12 scrollbar">
                                            <div id="template-div" class="selectable code"></div>
                                        </div>
                                    </div>

                                    {{ config_readme['cards']|safe }}
                                </div>

                                <div id="data-sources-readme" class="col s12 scrollbar settings-page-card-right scrollbar-x">
                                    {{ config_readme['data_sources']|safe }}
                                </div>

                                <div id="about" class="col s12 scrollbar settings-page-card-right">
                                    <div class="row">
                                        <div class="card theme-surface-1">
                                            <div class="card-content center-align">
                                                <img src="static/images/logo/full.svg">
                                                <h5>DashMachine</h5>
                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Version:</p>
                                                <p class="mb-2">{{ version }}-{{ revision_number }}</p>

                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Author:</p>
                                                <p class="mb-2">Ross Mountjoy (<a href="https://github.com/rmountjoy92" target="_blank"> Github </a>)</p>

                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Source code:</p>
                                                <p class="mb-2"><a href="https://github.com/rmountjoy92/DashMachine" target="_blank"> Repo</a></p>

                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Reddit:</p>
                                                <p class="mb-2"><a href="https://www.reddit.com/r/DashMachine/" target="_blank"> r/DashMachine</a>

                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Donations:</p>
                                                <p class="mb-2"><a href="https://liberapay.com/rmountjoy/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></p>
                                                <p class="mb-2"><a href="https://www.bountysource.com/teams/dashmachine-app" target="_blank"> Bountysource donation link</a></p>

                                                <div class="divider"></div>
                                                <p class="font-weight-900 mb-2">Bounties for new features:</p>
                                                <p class="mb-2"><a href="https://www.bountysource.com/" target="_blank"> Bountysource link</a></p>
                                                <p class="mb-2"><a href="https://github.com/bountysource/core/wiki/Frequently-Asked-Questions" target="_blank"> Bountysource faqs</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock content %}

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

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