{# custom javascript and modal to support editing a favorite #}
{% block page_javascript %}
<script language="Javascript">

        function createCustomServiceAccount(url, title, button){
            /*
             Description:
                Launch modal to confirm action

             Parameters:
                 url    - url to access on confirmation
                 title	- modal window title
                 button	- action button label
            */
            if (url === undefined){
                return;
            }
            if (title === undefined){
                var title = "Confirm";
            }
            if (button === undefined){
                var button = "Continue";
            }

            document.getElementById("id_modalCreateCustomServiceAccountHeader").innerHTML = "<b>"+title+"</b>";
            document.getElementById("id_modalCreateCustomServiceAccount_OK").innerHTML = button;
            var okbutton = document.getElementById("id_modalCreateCustomServiceAccount_OK");

            document.getElementById("id_modalCreateCustomServiceAccount_OK").onclick = function(){postCreateCustomServiceAccount(url);};
            $("#id_modalCreateCustomServiceAccount_OK").attr('class', 'btn btn-primary text-light');
            $("#id_modalCreateCustomServiceAccount").modal('show');
        }

        function postCreateCustomServiceAccount(url){
            /*
             Description:
                Send a POST using #modalsubmitform down below. Updates action to input url.

             Parameters:
                url   - url to POST a blank form to.
            */
            var dummyform = $('#modalsubmitform');
            var username = document.getElementById("username").value;
            var description = document.getElementById("description").value;
            dummyform.attr('action', url+"&username="+username+"&description="+description);
            dummyform.attr('method', 'POST');
            dummyform.submit();
        }

    </script>
{% endblock %}

<!-- MODAL: assign hostname -->
<div id="id_modalCreateCustomServiceAccountationWrapper">
    <div class="modal fade" id="id_modalCreateCustomServiceAccount" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="id_modalCreateCustomServiceAccountHeader"></h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" id="id_modalCreateCustomServiceAccountBody">

                    <form class="form-horizontal" role="form" action="">
                        <div class="form-group">
                            <div class="col-sm-12 font-weight-bold text-primary">* Name</div>
                            <div class="col-sm-12"><input type="text" class="form-control" id="username" name="username"/></div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12 font-weight-bold text-primary">Description</div>
                            <div class="col-sm-12"><input type="text" class="form-control" id="description" name="description"/></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer" id="id_modalCreateCustomServiceAccountFooter">
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-hidden="true">Cancel</button>
                    <a class="btn btn-primary text-light" id="id_modalCreateCustomServiceAccount_OK"></a>
                </div>
            </div>
        </div>
    </div>
</div>
