{% extends "base.html" %}

{% block content %}
<div class="card mb-3">
  <div class="card-header">
    Add Device
  </div>
  <div class="card-body">
    <form>
      <div class="mb-3">
        <label for="type_">Device Type</label>
        <select class="form-select" name="type_" required>
          <option></option>
          {% for name, device in devices.items() %}
          <option value="{{ name }}" {% if not device.available %}disabled{% endif %}>{{ name }}{% if device.error %} ({{ device.error }}){% endif %}</option>
          {% endfor %}
        </select>
      </div>
      <div class="mb-3">
        <label for="name">Name</label>
        <input class="form-control" name="name" type="text" required></input>
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <input class="btn btn-primary" type="submit" value="Next">
        <a href="{{ url_for("bussdcc_system_devices.index") }}" class="btn btn-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}