{% extends "base.html" %}
{% block title %}Config · Apex Console{% endblock %}
{% block body %}
<header class="topbar">
  <div>
    <h1>Config</h1>
    <p>Register devices and tune Runtime parameters.</p>
  </div>
</header>

<section class="config-layout">
  <section class="panel">
    <div class="section-title">
      <h2>Device Configuration</h2>
    </div>
    {% if device_error %}
    <p class="alert error">{{ device_error }}</p>
    {% endif %}
    {% if device_added %}
    <p class="alert success">Device &quot;{{ device_added }}&quot; registered.</p>
    {% endif %}
    <form class="form-grid" method="post" action="{{ url_for('runtime_console_register_device') }}">
      <label>
        Name
        <input type="text" name="name" value="{{ form_values.name }}" placeholder="Desk iPhone" />
      </label>
      <label>
        Driver
        <select name="driver_type">
          {% for driver_type in supported_driver_types %}
          <option
            value="{{ driver_type }}"
            {% if driver_type == form_values.driver_type %}selected{% endif %}
          >{{ driver_type }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        Server URL
        <input type="url" name="server_url" value="{{ form_values.server_url }}" />
      </label>
      <label>
        UDID
        <input type="text" name="udid" value="{{ form_values.udid }}" />
      </label>
      <label>
        WDA local port
        <input
          type="number"
          min="1"
          name="wda_local_port"
          value="{{ form_values.wda_local_port }}"
        />
      </label>
      <button class="icon-text-button submit-button" type="submit">
        <span>Add Device</span>
      </button>
    </form>

    <ul class="device-list managed">
      {% for device in devices %}
      <li class="device-row">
        <div>
          <strong>{{ device.name or device.id }}</strong>
          <span>{{ device.id }}</span>
        </div>
        <form method="post" action="{{ url_for('runtime_console_remove_device', device_id=device.id) }}">
          <button class="icon-button danger" type="submit" title="Remove device" aria-label="Remove device">
            <span>&times;</span>
          </button>
        </form>
      </li>
      {% endfor %}
    </ul>
  </section>

  <section class="panel">
    <div class="section-title">
      <h2>Runtime Parameters</h2>
    </div>
    {% if config_error %}
    <p class="alert error">{{ config_error }}</p>
    {% endif %}
    {% if config_saved %}
    <p class="alert success">Saved.</p>
    {% endif %}
    <form class="settings-form" method="post" action="{{ url_for('runtime_console_update_max_steps') }}">
      <label>
        Max steps
        <input type="number" min="1" name="max_steps" value="{{ max_steps }}" />
      </label>
      <button class="icon-text-button" type="submit">
        <span>Save</span>
      </button>
    </form>
  </section>
</section>
{% endblock %}