<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %} - mobileui - ScrapydWeb</title>

    <link rel="stylesheet" type="text/css" href="{{ static_css_style_mobileui }}">
    <script type="text/javascript" src="{{ static_js_icons_menu }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ static_css_icon_upload_icon_right }}">

    {% if IS_MOBILE or g.IS_MOBILE %}
    <link rel="stylesheet" type="text/css" href="{{ static_css_dropdown_mobileui }}">
    {% else %}
    <link rel="stylesheet" type="text/css" href="{{ static_css_dropdown }}">
    {% endif %}


    <link rel="icon" type="image/x-icon" href="{{ static_icon }}"  />
    <link rel="shortcut icon" type="image/x-icon" href="{{ static_icon_shortcut }}"  />
    <link rel="apple-touch-icon" href="{{ static_icon_apple_touch }}"  />

    <style type="text/css">
    </style>

    <script type="text/javascript" src="{{ static_js_jquery_min }}"></script>
    <script type="text/javascript" src="{{ static_js_common }}"></script>
    {% block head %}{% endblock %}
</head>


<body>
<nav>
    <div class="dropdown">
        {% if IS_MOBILE or g.IS_MOBILE %}
        <a class="dropbtn" onclick="handleDropdown();">
        {% else %}
        <a class="dropbtn">
        {% endif %}
            <span>{{ SCRAPYD_SERVERS[node-1] }}</span>
            <svg class="icon anchor" aria-hidden="true">
                <use xlink:href="#icon-right"></use>
            </svg>
        </a>

        <div class="dropdown-content-wrap">
            <div class="dropdown-content">
            {% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
                {% if SCRAPYD_SERVERS_GROUPS[loop.index-1] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index-1]) %}
                <div> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index-1] }} --- </div>
                {% endif %}

                <a {% if loop.index == node %}style="color: #409EFF; font-weight: 700;"{% endif %}
                href="javascript:;" onclick="forceLoader('{{ url_dashboard_list[loop.index-1] }}');">
                {{ SCRAPYD_SERVER }}
                </a>
            {% endfor %}
            </div>
        </div>
    </div>

    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
    <div class="switch-node">
        <a href="javascript:;" onclick="switchNode(-1);">&laquo;</a>
        <span>{{ node }} / {{ SCRAPYD_SERVERS_AMOUNT }}</span>
        <a href="javascript:;" onclick="switchNode(1);">&raquo;</a>
    </div>
    {% endif %}
</nav>


<main>
    <div style="display: flex; word-break: keep-all; margin: 8px 12px; margin-right: 0px;">
    <a class="button safe" href="javascript:;" onclick="forceLoader(window.location.pathname);">Desktop version</a>
    {% block neck %}{% endblock %}
    </div>

    <div id="content">
        {% block loader %}
        <div class="loader" style="display: none;" onclick="hideLoader();"></div>
        {% endblock %}
        {% block body %}{% endblock %}
    </div>
</main>

{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
<script>
var node = {{ node }};
var node_total = {{ SCRAPYD_SERVERS_AMOUNT }};

function switchNode(change) {
    var target = node + change;
    if(target < 1) {
        alert("Reaching the first node");
        return;
    } else if(target > node_total) {
        alert("Reaching the final node");
        return;
    }

    forceLoader(location.pathname.replace(/\/\d+/, '/'+target) + location.search);
}
</script>
{% endif %}
</body>
</html>
