{% extends 'base.html' %}


{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container content">

    <div class="col">
      <div class="card">
        <div class="card-header">NooLite MTRF</div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-2">
              <div class="list-group" id="list-tab" role="tablist" style="overflow-y: scroll; max-height: 50vh">
                {% for ch in channels %}
                  <a class="list-group-item list-group-item-action {{ "active" if loop.first }}" id="channel-{{ ch }}-list" data-toggle="list" href="#channel-{{ ch }}" role="tab" data-channel="{{ ch }}" aria-controls="channel-{{ ch }}">Канал {{ ch }}</a>
                {% endfor %}
              </div>
            </div>
            <div class="col-md-2">
              <button class="btn btn-outline-primary btn-block btn-sm" onclick="discoverAccs(currentChannel)">Опросить</button>
              <button class="btn btn-outline-primary btn-block btn-sm" onclick="addAcc(currentChannel)">Привязать NooLite-F</button>
              <button class="btn btn-outline-primary btn-block btn-sm" onclick="addAcc(currentChannel, 0)">Привязать</button>
              <button class="btn btn-outline-primary btn-block btn-sm" onclick="sendCommandToChannel(currentChannel, 0, 1, 3)">Включить режим привязки датчиков</button>
              <button class="btn btn-outline-primary btn-block btn-sm" onclick="sendCommandToChannel(currentChannel, 0, 1, 4)">Выключить режим привязки датчиков</button>
              <button class="btn btn-outline-danger btn-block btn-sm" onclick="deleteAllAccs(currentChannel)">Очистить канал</button>
            </div>
            <div class="col">
              <div class="card h-100">
                <div class="tab-content h-100" id="nav-tabContent">
                  {% for ch in channels %}
                    <div class="tab-pane fade show {{ "active" if loop.first }} h-100" id="channel-{{ ch }}" role="tabpanel" aria-labelledby="channel-{{ ch }}-list">
                      <table class="table table-hover text-center">
                        <thead>
                          <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Тип</th>
                            <th scope="col">Микропрограмма</th>
                            <th scope="col">Состояние</th>
                            <th scope="col">Яркость</th>
                            <th scope="col">Доступность</th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                      </table>
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="col" style="margin: 30px 0">
      <div class="card">
        <div class="card-header">HomeKit</div>
        <div class="card-body">
          <table id="hk-list" class="table table-hover text-center">
            <thead>
              <tr>
                <th scope="col">Имя</th>
                <th scope="col">NL Тип</th>
                <th scope="col">NL Канал</th>
                <th scope="col">NL Id</th>
                <th scope="col">Характеристики</th>
                <th style="width: 1%" scope="col">Удалить</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>


    <div class="col" style="margin: 30px 0">
      <div class="card">
        <div class="card-header">HomeKit создание аксессуара</div>
        <div class="card-body">
          <form action="post" name="create-hk-acc">
            <div class="row">
              <div class="form-group col">
                <label>Имя</label>
                <input name="name" required type="text" class="form-control" placeholder="Свет на кухне">
              </div>
              <div class="form-group col">
                <label>Тип</label>
                <select id="nl-type-select" name="type" required class="form-control">
                  {% for type in accTypes %}
                    <option data-description="{{ type.description }}" value="{{ type.code }}">{{ type.name }}</option>
                  {% endfor %}
                </select>
                <small id="nl-type-select-description" class="form-text text-muted">{{ accTypes[0].description }}</small>
              </div>
            </div>

            <div class="row">
              <div class="form-group col">
                <label>Канал</label>
                <input name="channel" required type="number" min="0" max="63" class="form-control" placeholder="1">
              </div>
              <div class="form-group col">
                <label>Id</label>
                <input name="id" type="text" maxlength="15" class="form-control" placeholder="00:00:02:112">
                <small class="form-text text-muted">Если есть</small>
              </div>
            </div>

            <button type="submit" class="btn btn-primary">Создать</button>
          </form>
        </div>
      </div>
    </div>


</div>
{% endblock %}


{% block js %}
  <script src="js/acc.js"></script>
{% endblock %}