{% extends "main/layout.html" %}
{% from 'global_macros.html' import input, button %}
{% from 'main/tcdrop.html' import tcdrop %}
{% block page_vendor_css %}
{% endblock page_vendor_css %}

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

{% block content %}
    <div id="config-wiki-modal" class="modal full-height-modal">
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h4>Config.ini Readme</h4>
                </div>
                <div id="config-help-col" class="col s12 theme-surface-1 padding-2 border-radius-10">
                    <h5>Settings Reference</h5>
                    <code class="selectable-all">
                        [Settings]<br>
                        theme = dark<br>
                        accent = orange<br>
                        background = static/images/backgrounds/background.png<br>
                    </code>

                    <table class="mt-4">
                        <thead>
                        <tr>
                            <th>Variable</th>
                            <th>Required</th>
                            <th>Description</th>
                            <th>Options</th>
                        </tr>
                        </thead>
                        <tbody class="selectable">
                        <tr>
                            <td>[Settings]</td>
                            <td>Yes</td>
                            <td>Config section name.</td>
                            <td>string</td>
                        </tr>
                        <tr>
                            <td>theme</td>
                            <td>Yes</td>
                            <td>UI theme</td>
                            <td>light, dark</td>
                        </tr>
                        <tr>
                            <td>accent</td>
                            <td>Yes</td>
                            <td>UI accent color</td>
                            <td>orange, green, blue, green, pink, grey</td>
                        </tr>
                        <tr>
                            <td>background</td>
                            <td>Yes</td>
                            <td>Background image for the UI</td>
                            <td>/static/images/backgrounds/yourpicture.png, external link to image, None, random</td>
                        </tr>
                        </tbody>
                    </table>

                    <h5>App Reference</h5>
                    <code class="selectable-all">
                        [App Name]<br>
                        prefix = https://<br>
                        url = your-website.com<br>
                        icon = static/images/apps/default.png<br>
                        sidebar_icon = static/images/apps/default.png<br>
                        description = Example description<br>
                        open_in = iframe<br>
                        data_template = None
                    </code>

                    <table class="mt-4">
                        <thead>
                        <tr>
                            <th>Variable</th>
                            <th>Required</th>
                            <th>Description</th>
                            <th>Options</th>
                        </tr>
                        </thead>
                        <tbody class="selectable">
                        <tr>
                            <td>[App Name]</td>
                            <td>Yes</td>
                            <td>The name of your app.</td>
                            <td>string</td>
                        </tr>
                        <tr>
                            <td>prefix</td>
                            <td>Yes</td>
                            <td>The prefix for the app's url.</td>
                            <td>web prefix, e.g. http:// or https://</td>
                        </tr>
                        <tr>
                            <td>url</td>
                            <td>Yes</td>
                            <td>The url for your app.</td>
                            <td>web url, e.g. myapp.com</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>No</td>
                            <td>Icon for the dashboard.</td>
                            <td>/static/images/icons/yourpicture.png, external link to image</td>
                        </tr>
                        <tr>
                            <td>sidebar_icon</td>
                            <td>No</td>
                            <td>Icon for the sidenav.</td>
                            <td>/static/images/icons/yourpicture.png, external link to image</td>
                        </tr>
                        <tr>
                            <td>description</td>
                            <td>No</td>
                            <td>A short description for the app.</td>
                            <td>string</td>
                        </tr>
                        <tr>
                            <td>open_in</td>
                            <td>Yes</td>
                            <td>open the app in the current tab, an iframe or a new tab</td>
                            <td>iframe, new_tab, this_tab</td>
                        </tr>
                        <tr>
                            <td>data_template</td>
                            <td>No</td>
                            <td>Template for displaying variable(s) from rest data *Note: you must have a rest data variable set up in the config</td>
                            <td>example: Data: {{ '{{ your_variable }}' }}</td>
                        </tr>
                        </tbody>
                    </table>

                    <h5>Api Data Reference</h5>
                    <code class="selectable-all">
                        [variable_name]<br>
                        platform = rest<br>
                        resource = your-website.com<br>
                        value_template = variable_name<br>
                    </code>

                    <table class="mt-4">
                        <thead>
                        <tr>
                            <th>Variable</th>
                            <th>Required</th>
                            <th>Description</th>
                            <th>Options</th>
                        </tr>
                        </thead>
                        <tbody class="selectable">
                        <tr>
                            <td>[variable_name]</td>
                            <td>Yes</td>
                            <td>The variable to be made available to apps.</td>
                            <td>variable (python syntax)</td>
                        </tr>
                        <tr>
                            <td>platform</td>
                            <td>Yes</td>
                            <td>Platform for data source</td>
                            <td>rest</td>
                        </tr>
                        <tr>
                            <td>resource</td>
                            <td>Yes</td>
                            <td>The url for the api call.</td>
                            <td>myapp.com/api/hello</td>
                        </tr>
                        <tr>
                            <td>value_template</td>
                            <td>No</td>
                            <td>Tranform the data returned by the api call (python syntax)</td>
                            <td>variable_name[0]['info']</td>
                        </tr>
                        <tr>
                            <td>method</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                        </tr>

                        <tr>
                            <td>payload</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                        </tr>

                        <tr>
                            <td>authentication</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                        </tr>

                        <tr>
                            <td>username</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                        </tr>

                        <tr>
                            <td>password</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                            <td>NOT IMPLEMENTED</td>
                        </tr>
                        </tbody>
                    </table>

                    <h5>Api Data Example</h5>
                    <p>Say we wanted to display how many Pokemon there are using the PokeAPI, we would add the following to the config:</p>
                    <code class="selectable-all">
                        [num_pokemon]<br>
                        platform = rest<br>
                        resource = https://pokeapi.co/api/v2/pokemon<br>
                        value_template = num_pokemon['count']<br>
                    </code>

                    <p>Then in the config entry for the app you want to add this to, you would add:</p>

                    <code class="selectable-all">
                        data_template = Pokemon: {{ '{{ num_pokemon }}' }}
                    </code>

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

    <div id="main" class="main-full">
        <div class="container">
            <div class="row">
                <div class="col s12 m12 l6">
                    <div class="card scrollbar settings-page-card">
                        <div class="card-content">
                                <div class="row">
                                    <div class="col s12">
                                        <h5>Config
                                            <a href="#config-wiki-modal" class="modal-trigger">
                                                <i class="material-icons-outlined theme-secondary-text icon-btn ml-2 toggle-config-help" style="position: relative; top: 4px;">info</i>
                                            </a>
                                        </h5>
                                        {{ button(
                                        icon="save",
                                        id="save-config-btn",
                                        float="left",
                                        class="ml-0 mt-1 mb-1",
                                        data={'url': url_for('settings_system.save_config')},
                                        text="save"
                                        ) }}
                                    </div>

                                    <div class="divider"></div>
                                    <form id="config-form">
                                        {{ input(
                                        size="s12",
                                        class="materialize-textarea code",
                                        form_obj=config_form.config,
                                        id="config-textarea"
                                        ) }}
                                    </form>
                                </div>
                        </div>
                    </div>
                </div>

                <div class="col s12 m12 l6">
                    <div class="card scrollbar settings-page-card">
                        <div class="card-content">

                            <div class="row">
                                <div class="col s12 mb-2">
                                    <ul class="tabs tabs-fixed-width">
                                        <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="#apps">
                                            <i class="material-icons-outlined">apps</i>
                                        </a></li>

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

                                <div id="images" class="col s12">
                                    <div class="row">
                                        <h5>Images</h5>
                                        <form id="add-images-form">
                                            <div class="input-field col s12 mt-4">
                                                <select name="folder">
                                                    <option value="icons">Icons</option>
                                                    <option value="backgrounds">Backgrounds</option>
                                                </select>
                                                <label>Folder</label>
                                            </div>
                                            <input name="files" id="add-images-input" class="hide">
                                        </form>
                                        <div class="col s12">
                                            {{ tcdrop(allowed_types='jpg,jpeg,png,gif', id="images-tcdrop", max_files="30") }}
                                            {{ button(text="save", icon="save", id="save-images-btn", float="left", data={"url": url_for('settings_system.add_images')}) }}
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div id="files-div">{{ files_html|safe }}</div>
                                    </div>

                                </div>

                                <div id="apps" class="col s12">
                                    <h5>App Templates</h5>
                                    <div class="row card-filter-container">
                                        <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">
                                            <div id="template-div" class="selectable-all code"></div>
                                        </div>
                                    </div>
                                </div>

                                <div id="user" class="col s12">
                                    <div class="row">
                                        <h5>User</h5>

                                        <form id="edit-user-form">
                                            {{ user_form.hidden_tag() }}

                                            {{ input(
                                            label="Username",
                                            id="user-form-username",
                                            size="s12",
                                            form_obj=user_form.username,
                                            val=current_user.username
                                            ) }}

                                            {{ input(
                                            label="Password",
                                            id="user-form-password",
                                            form_obj=user_form.password,
                                            size="s12"
                                            ) }}

                                            {{ input(
                                            label="Confirm Password",
                                            id="user-form-confirm_password",
                                            form_obj=user_form.confirm_password,
                                            required='required',
                                            size="s12"
                                            ) }}
                                        </form>

                                        {{ button(
                                        icon="save",
                                        float="left",
                                        id="edit-user-btn",
                                        data={'url': url_for('settings_system.edit_user')},
                                        text="save"
                                        ) }}
                                    </div>

                                    <div class="row mt-4">
                                        <h5>DashMachine</h5>
                                        <p class="mb-2">version: {{ version }}</p>

                                        {{ button(
                                        float="left",
                                        id="update-btn",
                                        icon="system_update_alt",
                                        class="hide",
                                        data={"url": url_for('settings_system.update')},
                                        text="update available"
                                        ) }}

                                        {{ button(
                                        float="left",
                                        id="check-update-btn",
                                        icon="security",
                                        data={"url": url_for('settings_system.check_update')},
                                        text="check for update"
                                        ) }}

                                    </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 %}