{% extends "bootstrap/base.html" %}


{% macro render_tick_cross(cond) -%}
    {% if cond == True %}
        <strong><span style="color:green">&#10004;</span></strong>
    {% else %}
        <strong><span style="color:red">&#10008;</span></strong>
    {% endif %}
{%- endmacro %}


{% block title %}OpenWRT ACP{% endblock %}

{% block head %}
    {{ super() }}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{% block navbar %}
    <style type="text/css">
        {% include "css/navbar_2.css" %}
        {% include "css/bootstrap_override.css" %}
    </style>

    <div class="navbar navbar-inverse navbar-custom" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ url_for('main.index') }}"><span style="color:white">OpenWRT ACP</span></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    {% if current_user.is_authenticated %}
                        <li><a href="{{ url_for('main.index') }}"><span
                                class="glyphicon glyphicon-hdd"></span> Devices</a></li>
                        <li><a href="{{ url_for('main.network') }}"><span
                                class="glyphicon glyphicon-globe"></span> Networks</a></li>
                        <li><a href="{{ url_for('main.wireless') }}"><span
                                class="glyphicon glyphicon-signal"></span> Wireless</a></li>
                        <li><a href="{{ url_for('main.clients') }}"><span
                                class="glyphicon glyphicon-user"></span> Clients</a></li>
                    {% endif %}
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if current_user.is_authenticated %}
                        <li><a href="{{ url_for('auth.logout') }}"><span
                                class="glyphicon glyphicon-log-out"></span><strong> Log Out</strong></a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <style type="text/css">
        {% include "css/center_form.css" %}
        {% include "css/toastr.min.css" %}
    </style>

    <div class="container">
        <div id="page_content">
            {% block page_content %}{% endblock %}
        </div>
    </div>

    {#
    <div class="footer navbar-fixed-bottom" style="background-color: cornsilk">
        <div class="container">
            <p class="text-muted">Place sticky footer content here.</p>
        </div>
    </div>
     #}
{% endblock %}


{% block scripts %}
    {{ super() }}
    <script type="text/javascript" src="/static/js/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename='js/toastr.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('li.active').removeClass('active');
            $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
        });
    </script>
{% endblock %}