{% extends 'base.html' %}

{% block content %}
    <h1>Add New Device</h1>

    <form id="add_device" method="POST">
        {{ form.hidden_tag() }}
        <fieldset>
            <div class="row mb-3">
                {{ form.device_id.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                  {% if form.device_id.errors %}
                        {{ form.device_id(class="form-control is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.device_id.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.device_id(class="form-control") }}
                    {% endif %}
                </div>
            </div>
            <div class="row mb-3">
                {{ form.device_type.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                  {% if form.device_type.errors %}
                        {{ form.device_type(class="form-control is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.device_type.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.device_type(class="form-control") }}
                    {% endif %}
                </div>
            </div>
            <div class="row mb-3">
                {{ form.operational_status.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                  {% if form.operational_status.errors %}
                        {{ form.operational_status(class="form-control is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.operational_status.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.operational_status(class="form-control") }}
                    {% endif %}
                </div>
            </div>
            <div class="row mb-3">
                {{ form.device_config.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                  {% if form.device_config.errors %}
                        {{ form.device_config(class="form-control is-invalid", rows=5) }}
                        <div class="invalid-feedback">
                            {% for error in form.device_config.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.device_config(class="form-control", rows=5) }}
                    {% endif %}
                </div>
                <div id="device_config_help" class="form-text">The device configurations should follow a <i>key=value</i> format, one configuration per line.</div>
            </div>
            <div class="row mb-3">
                {{ form.device_drivers.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                  {% if form.device_drivers.errors %}
                        {{ form.device_drivers(class="form-control is-invalid", rows=5) }}
                        <div class="invalid-feedback">
                            {% for error in form.device_drivers.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.device_drivers(class="form-control", rows=5) }}
                    {% endif %}
                </div>
                <div id="device_drivers_help" class="form-text">
                    List the device drivers by their numerical ID, separated by commas, without spaces between them. Numerical IDs: {{ device_driver_ids }}.
                </div>
            </div>
            <div class="row mb-3">
                <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
            </div>
        </fieldset>
    </form>
{% endblock %}