{% extends "base.html" %}

{% block title %}OpenWRT ACP - Wireless Network{% endblock %}

{% block page_content %}
    <style type="text/css">
        .table > tbody > tr > td {
            vertical-align: middle;
        }

        .table > tbody > tr > th {
            vertical-align: middle;
        }

    </style>

    <div class="page-header">
        <h3><strong>Wireless Networks</strong></h3>
    </div>

    <div style="width: 50%">
        <table class="table table-striped table-hover table-bordered">
            <thead class="head">
            <tr>
                <th scope="col">SSID</th>
                <th scope="col">Enabled</th>
                <th scope="col">Network</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for wireless in wireless_networks %}
                <tr name="{{ wireless.ssid }}">
                    <th scope="row" class="col-md-2" id={{ wireless.ssid }}>{{ wireless.ssid }}</th>
                    <td name="enabled" class="col-md-1">{{ render_tick_cross(wireless.enabled) }}</td>
                    <td name="network" class="col-md-1">
                        <a href="/network/edit/{{ wireless.network }}">{{ wireless.network }}</a>
                    </td>
                    <td name="actions" class="col-md-2">
                        <a name="network_edit" class="btn btn-primary" style="width: 80px" href="/wireless/edit/{{ wireless.ssid }}">
                            <i class="glyphicon glyphicon-edit"></i> Edit
                        </a>
                        <a name="network_delete" class="btn btn-danger" href="/wireless/delete/{{ wireless.ssid }}">
                            <i class="glyphicon glyphicon-trash"></i> Delete
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    <div/>

    <div>
        <a id="add_ssid" class="btn btn-success" type="button" href="/wireless/new">
            <i class="glyphicon glyphicon-plus"></i> Add Wireless Network
        </a>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script>
        $(document).ready(function () {

        });
    </script>
{% endblock %}
