{% extends "layout.html" %}
{% from "macros.html" import alert_dismiss with context %}

{% block content %}
<div id="encabezado" class="jumbotron-fluid bg-primary text-white pb-1 pt-1 px-2">
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span class="float-xs-left"><h1 class="display-4"><i class="fa fa-plug" aria-hidden="true"></i> <strong>Outlets</strong> Control</h1></span>
        <span class="float-xs-right flex-xs-bottom">
            <a class="btn btn-warning btn-sm" href="{{ url_for('config_editor') }}" role="button">
                <i class="fa fa-cogs" aria-hidden="true"></i> Config
            </a>
        </span>
    </div>
</div>
<div class="container-fluid">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
        {{ alert_dismiss({'alert_type': category, 'texto_alerta': message}) }}
        {% endfor %}
      {% endif %}
    {% endwith %}
    <div class="row flex-items-xs-center">
        {% for outlet in outlets %}
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="pb-1">
                <h2 class="text-xs-center mb-0 mt-1"><small>Switch: </small>{{ outlet['label'] }}</h2>
                <div class="btn-toolbar button-wrapper flex-items-xs-center" role="toolbar" aria-label="Toolbar with Outlets switches">
                    <div class="btn-group w-100" role="group" aria-label="SWITCH {{ outlet['label'] }}">
                        <a class="btn btn-success btn-lg {% if outlets_state[loop.index0] == True %}active{% endif %}" style="width: 49.25%" role="button"
                           href="{{ url_for('switch_outlet', operation='on', outlet_number=loop.index)}}">ON
                        </a>
                        <a class="btn btn-danger btn-lg {% if outlets_state[loop.index0] == False %}active{% endif %}" style="width: 49.25%" role="button"
                           href="{{ url_for('switch_outlet', operation='off', outlet_number=loop.index)}}">OFF
                        </a>
                    </div>
                </div>
{#                <p>state: {{ outlets_state[loop.index] }}</p>#}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
<br>
<hr>
{#<br>#}
{#<div class="container-fluid">#}
{#    <div class="my-1">#}
{#    <a data-toggle="collapse" data-target="#details"><span class="float-sm-left"><h4>OUTLETS in <code>codes_outlets.json</code> file</h4></span><br><span class="float-sm-right"><small>(press to show/hide)</small></span></a>#}
{#    <br>#}
{#    </div>#}
{#    <div id="details" class="collapse">#}
{#    {% for outlet in outlets %}#}
{#    <p class="lead"><strong>{{ outlet['label']|safe }}</strong> --> ON CODE: {{ outlet['off']|safe }}; OFF CODE: {{ outlet['off']|safe }}</p>#}
{#    {% endfor %}#}
{#    </div>#}
{#</div>#}
{% endblock %}
