{% extends "base" %}
{% block content %}
  <div class="d-grid gap-3 mb-3">
    <h1 class="inter">{{app.name}}</h1>
    <p class="px-1 fs-5 inter">{{app.description}}</p>
    <h2 class="inter">Outputs</h2>
    {% for output in outputs -%}
      <div class="card rounded bg-secondary">
        <div class="card-body">
          <h4>
            <a href="">{{output.model}} ({{output.name}})</a>
            <span class="badge bg-primary">{{output.current_mode.width}}x{{output.current_mode.height}}</span>
          </h4>
          <a class="font-weight-bold text-light" href=""></a>
          <form id="form">
            <div class="form-group">
              <select class="form-select bg-light form-select-sm mb-2" id="resolution" name="resolution" aria-label="Default select example">
                <option selected>Open this select menu</option>
                {% for mode in output.modes -%}
                <option value="{{mode.width}}x{{mode.height}}">{{mode.width}}x{{mode.height}} @{{mode.refresh/1000}} Hz</option>
                {% endfor -%}
              </select>
              <button type="button" class="btn btn-primary" onclick="sendMessage();">Send</button>
            </div>            
          </form>
        </div>
        <div class="card-footer bg-secondary border-0">
          <small>{{output.make}}</small>
        </div>
    </div>
    {% endfor -%}
  </div>
{% endblock content %}