{% extends 'base.html' %}

{% block content %}
<div class="wifi text-center">
<h1>WiFi connection</h1>

{% if error %}
<p class="text-danger">An error occured when connecting to wifi...</p>
{% endif %}

{% if networks %}
<form class="form-horizontal" method="POST" action="/wifi/">
  <div class="form-group">
    <label for="ssid" class="col-sm-2 control-label">SSID</label>
    <div class="col-sm-10">

      <table>
        <tbody>
          {% for network in networks %}
          <tr>
            <td class="text-left"><input type="radio" value="{{network.ssid}}" name="ssid" title="test" />{{ network.ssid }}</td>
            <td>
              <i class="fa fa-signal" style="font-size: {{ 50 + network.signal / 100 * 50 }}%" aria-hidden="true"></i>
            </td>
            <td>{% if network.secured %}<i class="fa fa-lock" aria-hidden="true"></i>{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="form-group">
    <label for="inputKey" class="col-sm-2 control-label">Key</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="wifi-key" name="password" />
    </div>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-success">Connect</button>
    <a href="/reset/" class="btn btn-default">Cancel</a>
  </div>
</form>
{% else %}

<p>No network found</p>
<p><a href="/" class="btn btn-success">Refresh</a> <a href="/reset/" class="btn btn-default">Cancel</a></p>

{% endif %}
</div>
{% endblock %}
