{% extends 'base.html' %}

{% block content %}
<div class="col-sm-12 d-flex flex-column">

    <h1>Update Device {{ device.opticalconfig_id.opticalconfig_uuid }}</h1>
    <h2> interface :{{interface_name}}</h2>
</div>
<br />
<form id="update_device" method="POST">
    {{ form.hidden_tag() }}
    <fieldset>
        <div class="row mb-3 ">
            <div class="col-12">
                {{ form.ip.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                    {% if form.ip.errors %}
                    {{ form.ip(class="form-control is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.ip.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                    {% else %}

                    {{ form.ip(class="col-sm-7 form-control") }}

                    {% endif %}
                </div>
            </div>
            <div class="col-12 ">
                {{ form.prefix_length.label(class="col-sm-2 col-form-label") }}
                <div class="col-sm-10">
                    {% if form.prefix_length.errors %}
                    {{ form.prefix_length(class="form-control is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.prefix_length.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                    {% else %}


                    {{ form.prefix_length(class="col-sm-7 form-control") }}

                    {% endif %}
                </div>


            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-3">

                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-plus-circle-fill"></i>
                        update interface
                    </button>
                </div>
                <div class="col-sm-3 mx-1">

                    <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
                        <i class="bi bi-box-arrow-in-left"></i>
                        Cancel
                    </button>
                </div>
            </div>
        </div>
        </div>
    </fieldset>
</form>
{% endblock %}