{% extends "generic/object_create.html" %}
{% load static %}
{% load form_helpers %}

<h1>{% block title %}{% if obj.present_in_database %}Editing{% else %}Add a new{% endif %} Nautobot Access Grant{% endblock title %}</h1>

{% block form %}
<div class="card">
    <div class="card-body">
        {% render_field form.name %}
        <div class="mb-10 d-flex justify-content-center">
            <label class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9 float-end">
                <button type="button" class="btn btn-primary" id="name-lookup">Look up Value from Name</button>
                <img id="lookup-loader" src="{% static 'img/ajax-loader.gif' %}" height="20" style="display: none;">
            </div>
        </div>
        {% render_field form.value %}
        {% render_field form.command %}
        {% render_field form.subcommand %}
        {% render_field form.grant_type %}
    </div>
</div>
{% include "inc/extras_features_edit_form_fields.html" %}
{% endblock form %}

{% block javascript %}
<script type="text/javascript">
$(document).ready(function() {
    $("#name-lookup").click(function() {
        let grant_type = $("#id_grant_type").val();
        if (!grant_type) {
            alert("Please select a grant type");
            return;
        }
        let name = $("#id_name").val();
        if (!name) {
            alert("Please enter a name to look up the value for");
            return;
        }

        $("img#lookup-loader").show();

        $.ajax({
            url: "{% url 'plugins-api:nautobot_chatops-api:access_lookup' %}",
            method: "GET",
            headers: { "X-CSRFToken": "{{ csrf_token }" },
            dataType: "json",
            context: this,
            data: {
                grant_type: grant_type,
                name: name,
            },
            success: function(data) {
                $("#id_value").val(data.value);
                $("img#lookup-loader").hide();
            },
            error: function(data) {
                $("img#lookup-loader").hide();
                $("#id_value").val("");
                if (data.status == "404") {
                    alert("No value found for " + grant_type + ' "' + name + '"');
                } else if (data.status == "501") {
                    alert("Unable to look up values for " + grant_type + " - sorry!");
                } else {
                    alert("Error " + data.status);
                }
            }
        });
    });
});
</script>
{% endblock javascript %}