{% extends "main.jinja" %}

{% macro os_section(os) %}
    {% set os_info = info[os] %}
    {% set client_recommend_info = os_info['clients'][os_info['client_recommend']] %}
    <section id="{{ os }}" class="os {% if os == probable_os %}active{% endif %}">
        <nav id="menu-os" class="menu">
            <ul>
            {% for menu_os in info %}
                <li><a class="os-link {{ menu_os }} {% if menu_os == os %}active{% else %}inactive{% endif %}" href="#{{ menu_os }}">{{ info[menu_os]['title'] }}</a></li>
            {% endfor %}
            </ul>
        </nav>
        <div class="os-content">
            <h2>If your device is running {{ os_info['title'] }}, we recommend:</h2>
            <div class="client-installer-recommend">
                <div class="client-recommend">
                    <h3>Installing</h3>
                    {{ box_client(os, os_info['client_recommend']) }}
                </div>
                <div class="installer-recommend">
                    <h3>Via</h3>
                    {{ box_installer(os, os_info['client_recommend'], client_recommend_info['installer_recommend']) }}
                    </div>
            </div>

            {% if client_recommend_info['installer_other']|length %}
            <div class="installer-other">
                <h3>You can also install {{ client_recommend_info['title'] }} via…</h3>
                <ul class="other-installers">
                {% for installer in client_recommend_info['installer_other'] %}
                    <li>{{ box_installer(os, os_info['client_recommend'], installer) }}</li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}

            {% if os_info['client_other']|length %}
            <div class="client-other">
                <h3>Alternatively, these clients available for {{ os_info['title'] }} are also supported</h3>
                {% for client_other in os_info['client_other'] %}
                    {{ box_client(os, client_other) }}
                    {{ box_installer(os, client_other, os_info['clients'][client_other]['installer_recommend']) }}
                {% endfor %}
            </div>
            {% endif %}

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

{% macro box_installer(os, client, installer) %}
    {% set installer_info = info[os]['clients'][client]['installers'][installer] %}
    <article class="installer {{ installer }} {% if installer_info['gratis'] %}gratis{% else %}paid{% endif %}">

        <h3>{{ installer_info['title'] }}</h3>

        <aside class="price {% if installer_info['gratis'] %}gratis{% else %}paid{% endif %}">
            Installing {{ info[os]['clients'][client]['title'] }} via {{ installer_info['title'] }} is {% if not installer_info['gratis'] %}<strong>not</strong>{% endif %} free of charge.
        </aside>

        {% if installer_info['magic_support'] %}
            {{ installer_info['guide_magic'] }}
        {% else %}
            {{ installer_info['guide_package'] }}
        {% endif %}
    </article>
{% endmacro %}

{% macro box_client(os, client) %}
    {% set current_client_info = info[os]['clients'][client] %}
    <article class="client {{ client }}">
        <h3>{{ current_client_info['title'] }}</h3>
        {% if 'logo' in current_client_info %}
            <img class="logo" src="{{ current_client_info['logo'] }}" />
        {% endif %}
        <p>{{ current_client_info['description'] }}</p>
        <h4>Features</h4>
        <ul class="feature-links">
        {% for feature in current_client_info['features'] %}
            {% set info = feature_info[feature] %}
            <li class="{{ feature }}">
                <img class="icon" src="/resources/icons/features/{{ feature }}.svg" title="{{ info['title'] }}" />
                <dfn>{{ info['title'] }}</dfn>
            </li>
        {% endfor %}
        </ul>

        <details>
            <summary>Confused?</summary>
            <dl class="features">
            {% for feature in current_client_info['features'] %}
                {% set info = feature_info[feature] %}
                <dt>{{ info['title'] }}</dt>
                <dd>{{ info['help'] }}</dd>
            {% endfor %}
            </dl>
        </details>

        <ul class="links">
            <li><a class="project-link" href="{{ current_client_info['project_url'] }}" target="_blank" rel="noreferrer">Project site</a></li>
            {% if 'help_url' in current_client_info %}
            <li><a class="help-link" href="{{ current_client_info['help_url'] }}" target="_blank" rel="noreferrer">Help</a></li>
            {% endif %}
        </ul>
    </article>
{% endmacro %}


{% block content %}
    <h1>{{ welcome_msg }}</h1>

    {% if content %}
        {{ content }}
    {% else %}

        <section id="os-list">
            {% for os in info %}
                {{ os_section(os) }}
            {% endfor %}

        </section>

    {% endif %}
{% endblock %}