

{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% set included = True %}

{% block title %}
Devices and Synoptic
{% endblock title %}

{% block content %}

<div class="row">
  <div class="col-4">


    <article class="col">

      <h3>ICS panel</h3>

      <form class="form"  method="post">

        <fieldset id="motion_type">

          <div class="row mb-1">

            <div class="col-4">
            </div>

            <div class="col-auto">

              <div class="input-group input-group-sm">

                <div class="input-group-text">
                  <input class="form-check-input mt-1 mb-1" type="checkbox"
                         value="" id="selectall" name="selectall" autocomplete="off">
                </div>

                <button type="button" class="btn btn-outline-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="Select all" tabindex="-1">
                  ?
                </button>

              </div>
            </div>

            <!-- <div class="btn-group col  btn-group-sm" role="group"> -->

              <!-- <input type="radio" class="btn-check" name="motion" id="named" value="named" checked> -->
              <!-- <label class="btn btn-outline-primary" for="named">Named</label> -->

                <!-- <input type="radio" class="btn-check" name="motion" id="absolute" value="absolute" > -->
                <!-- <label class="btn btn-outline-primary" for="absolute">Absolute</label> -->

              <!--   <input type="radio" class="btn-check" name="motion" id="relative" value="relative"> -->
              <!--   <label class="btn btn-outline-primary" for="relative">Relative</label> -->

            <!-- </div> -->

            <!-- <div class="col-2"> -->

            <!-- </div> -->

          </div>
        </fieldset>

        <fieldset id="device_values">

          {% for device,params in devices.items() | sort %}

          <div class="row mb-1"
               data-shins-type="device"
               data-shins-name="{{device}}"
               data-shins-value="{{value}}">

            <div class="col-4">
              <label for="{{device}}" class="col-form-label">
                {{device}}
              </label>
            </div>

            <div class="col">

              <div class="input-group input-group-sm">

                <div class="input-group-text">
                  <input class="form-check-input mt-0" type="checkbox"
                         value="" id="{{device}}-chk" >
                </div>

                {% if params.options is string or not params.options %}

                <input type="text"
                       class="form-control"
                       id="{{device}}"
                       name="{{device}}"
                       placeholder="no named pos"
                       disabled >

                {% else %}

                <select id="{{device}}" name="{{device}}" class="form-control" disabled>
                  {% for o in params.options %}
                  <option value="{{o}}"
                          {% if o == params.status.named %} selected {% endif %}>
                    {{o}}
                  </option>
                  {% endfor %}
                </select>

                {% endif %}

                <button type="button" class="btn btn-outline-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="{{params['help']}}" tabindex="-1">
                  ?
                </button>

              </div>

            </div>

            <div class="col-2 mt-1">
              <var class="form-text" data-{{device}}-named="{{params.status.named}}">{{params.status.named}}</var>
            </div>

            <div class="col-2 mt-1">
              <span class="form-text">enc</span>:
              <var class="form-text" data-{{device}}-encoder="{{params.status.encoder}}">{{params.status.encoder}}</var>
            </div>

          </div>

          <script>
            $('#{{device}}-chk').on("click change", function () {
                var checked = this.checked;
                $('#{{device}}').prop('disabled', !checked);
            });
          </script>

          {% endfor %}
        </fieldset>

        <fieldset id="action">

          <input type="submit" id="move" value="Move" class="btn btn-primary">
          <input type="submit" id="home" value="Home" class="btn btn-outline-primary">
          <input type="submit" id="abort" value="Abort" class="btn btn-outline-danger" tabindex="-1" disabled>

        </fieldset>

      </form>

    </article>



  </div>
  <div class="col-8">


    <article class="col">

      <h3>Synoptic panel</h3>
      <div class="row">
        <div style="text-align:center">
          {% include "synoptic.svg" %}
        </div>
      </div>

      <div class="row">
        <div class="col">
        </div>

        <div class="col-2 mt-2">
          <small class="col text-success">
            LEFT Instrument Authorized:
            <var data-status="lbt_l_auth">und</var>
          </small>
        </div>
        <div class="col-2 mt-2">
          <small class="col text-success">
            RIGHT Instrument Authorized:
            <var data-status="lbt_r_auth">und</var>
          </small>
        </div>
      </div>

    </article>


  </div>
</div>

<script src="/static/popover.js"></script>

<script>

</script>





{% endblock content %}
