{% extends "base.html" %}

{% block content %}
<div class="card mb-3">
  <div class="card-header">
    Add Bus
  </div>
  <div class="card-body">
    <form>
      <div class="mb-3">
        <label for="type_">Bus Type</label>
        <select class="form-select" name="type_" required>
          <option></option>
          {% for name, bus in buses.items() %}
          <option value="{{ name }}" {% if not bus.available %}disabled{% endif %}>{{ name }}{% if bus.error %} ({{ bus.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("device.index") }}" class="btn btn-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}