{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Drycc Passport</title>
    <link rel="stylesheet" href="{% static '/css/home.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static '/css/bashboard.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static '/css/purple3.min.css' %}" type="text/css">
</head>
<body>
<div id="app" data-v-app="">
    <nav class="glostick" data-v-378f447d data-v-53c07f68>
        <div class="glostick__property" data-v-378f447d="">
            <a class="glostick__property__name" href="/" data-v-378f447d="">
                <i class="icon-logo" data-v-378f447d=""></i>
                <svg width="62" height="11" viewBox="0 0 62 11"
                     xmlns="http://www.w3.org/2000/svg" data-v-378f447d="">
                    <title
                            data-v-378f447d="">Drycc</title>
                    <path d="M0 9.802h2.6V5.915h3.198v3.887h2.6V.182h-2.6v3.575H2.6V.182H0v9.62zm11.374 0h7.085V7.709h-4.485V5.928h3.042V3.9h-3.042V2.34h4.264V.182h-6.864v9.62zm9.567 0h2.548V6.461h.715l1.859 3.341h2.756l-2.041-3.679c1.26-.429 1.898-1.3 1.898-2.808 0-2.314-1.508-3.133-3.978-3.133H20.94v9.62zm2.548-5.317V2.288h1.118c1.066 0 1.534.286 1.534 1.092s-.468 1.105-1.534 1.105h-1.118zm12.257 5.499c2.314 0 4.72-1.469 4.72-4.992C40.465 1.469 38.06 0 35.745 0c-2.327 0-4.732 1.469-4.732 4.992 0 3.523 2.405 4.992 4.732 4.992zm0-2.08c-1.365 0-2.132-1.144-2.132-2.912s.767-2.847 2.132-2.847c1.352 0 2.12 1.079 2.12 2.847s-.768 2.912-2.12 2.912zm7.24 1.898h2.6v-2.99l.741-.858 2.275 3.848h2.938l-3.523-5.824L51.254.182h-3.016l-2.652 3.484V.182h-2.6v9.62zm14.624.143c2.808 0 4.03-1.456 4.03-4.004V.182h-2.548v5.746c0 1.326-.416 1.924-1.456 1.924s-1.469-.598-1.469-1.924V.182h-2.6v5.759c0 2.548 1.235 4.004 4.043 4.004z"
                          fill="%238460AA" fill-rule="evenodd"
                          data-v-378f447d="">
                    </path>
                </svg>
            </a>
        </div>
        <div class="account_list_btn_cls">
            <a class="glostick__menu-icon glostick__menu-icon--account"
               data-v-72741217=""
               onclick="show_account_list()">
                <div class="glostick__user__avatar--container"
                     data-v-72741217="">
                    <img class="glostick__user__avatar" src="{% static 'images/ninja-avatar-96x96.png' %}" id="menu-account" data-v-72741217="">
                </div>
            </a>

        <ul id="glostick__menu--account"
            class="glostick__menu glostick__menu--account glostick__menu--open"
            data-v-72741217="">
            <li class="glostick__menu__listitem" data-v-72741217="">
                <a class="glostick__menu__item glostick__menu__item--account-details"
                   data-v-72741217="">
                    <div class="glostick__account-details__name"
                         data-v-72741217="">{{ user.username }}</div>
                    <div class="glostick__account-details__email"
                         data-v-72741217="">{{ user.email }}</div>
                </a>
            </li>
            <li class="glostick__menu__listitem" data-v-72741217="">
                <a class="glostick__menu__item glostick__menu__item--settings"
                   href="/user/password_change/" data-v-72741217="">change
                    password </a>
            </li>
            <li class="glostick__menu__listitem" data-v-72741217="">
                <a class="glostick__menu__item glostick__menu__item--signout"
                   href="/user/logout/" data-v-72741217="">Sign out</a>
            </li>
        </ul>
        </div>
    </nav>
    <div class="main-panel bg-lightest-silver relative" data-v-53c07f68>
    <div class="main-content" data-v-4bdbd484="">
        <nav class="app-nav nav nav-tabs sub-nav ember-view" data-v-726bcaed="" data-v-4bdbd484="">
            <div class="limit-width" data-v-726bcaed="">
                <div class="sub-nav-item ember-view" data-v-726bcaed="">
                    <a href="{% url 'user_grants' %}" class="

                            {% block  is_grant_active %}{% endblock %} ember-view"
                       data-v-726bcaed="">
                        <svg class="icon malibu-icon fill-purple"
                             data-v-726bcaed=""
                             style="height: 24px; width: 24px;"><title
                                id="malibu-icon-ember486" data-v-726bcaed="">
                            Applications grant</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#overview-28"
                                 data-v-726bcaed=""></use>
                        </svg>
                        <span class="sub-nav-item-name gray" data-v-726bcaed="">Applications grant</span>
                    </a>
                </div>
                <div class="sub-nav-item ember-view" data-v-726bcaed="">
                    <a href="{% url 'user_tokens' %}" class="

                            {% block  is_token_active %}{% endblock %} ember-view"
                       data-v-726bcaed="">
                        <svg class="icon malibu-icon fill-gray"
                             data-v-726bcaed=""
                             style="height: 24px; width: 24px;"><title
                                id="malibu-icon-ember489" data-v-726bcaed="">
                           Access Tokens</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#formation-28"
                                 data-v-726bcaed=""></use>
                        </svg>
                        <span class="sub-nav-item-name gray" data-v-726bcaed="">Access Tokens</span>
                    </a>
                </div>
                <div class="sub-nav-item ember-view" data-v-726bcaed="">
                    <a href="{% url 'user_logs' %}" class="
                            {% block  is_log_active %}{% endblock %} ember-view"
                       data-v-726bcaed="">
                        <svg class="icon malibu-icon fill-gray"
                             data-v-726bcaed=""
                             style="height: 24px; width: 24px;"><title
                                data-v-726bcaed="">Logs</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#deploy-28"
                                 data-v-726bcaed=""></use>
                        </svg>
                        <span class="sub-nav-item-name gray" data-v-726bcaed="">Recent actions</span>
                    </a>
                </div>
            </div>
        </nav>
        {% block body %}{% endblock %}
        <div id="confirmation_box" style="z-index:50" class="hk-slide-panel-container shadow-outer-2 flex flex-column fixed bg-white overflow-y-hidden ma2 br2 from-right standard" data-v-45035942="">
        <div class="bg-gradient-silver hk-slide-panel-header relative flex justify-center tc items-center relative bb b--light-silver bg-white z-2 ember-view" data-v-45035942="">
            <div class="ml4 flex-auto f3 dark-gray truncate lh-copy" data-v-45035942>
                Delete Item
            </div>
            <button onclick="hidden_confirmation_box()" class="flex bg-transparent bn mr2 mt0 pa1 pointer" type="button" data-v-45035942="">
                <svg class="icon malibu-icon fill-gray" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1158" width="200" height="200" data-v-45035942="" style="height: 16px; width: 16px;">
                    <path d="M574.55 522.35L904.4 192.5c16.65-16.65 16.65-44.1 0-60.75l-1.8-1.8c-16.65-16.65-44.1-16.65-60.75 0L512 460.25l-329.85-330.3c-16.65-16.65-44.1-16.65-60.75 0l-1.8 1.8c-17.1 16.65-17.1 44.1 0 60.75l329.85 329.85L119.6 852.2c-16.65 16.65-16.65 44.1 0 60.75l1.8 1.8c16.65 16.65 44.1 16.65 60.75 0L512 584.9l329.85 329.85c16.65 16.65 44.1 16.65 60.75 0l1.8-1.8c16.65-16.65 16.65-44.1 0-60.75L574.55 522.35z" p-id="1159" data-v-45035942="">
                    </path>
                </svg>
            </button>
        </div>
        <div class="hk-slide-panel-content relative overflow-y-auto flex flex-column z-1 ember-view" data-v-45035942="">
            <div class="flex flex-column h-100" data-v-45035942="">
                <div class="slide-panel-shadow-cover-top z-5" data-v-45035942=""></div>
                <div class="slide-panel-content flex-grow-1 flex-shrink-0 pa4" data-v-45035942="">
                    <div class="pb3" data-v-45035942="">
                        <div class="ember-view" data-v-45035942="">
                            <div class="collaborator-edit" data-v-45035942="">
                                <div class="form-group" data-v-45035942="">
                                    <div class="row" data-v-45035942="">
                                        <div class="col-sm-12" data-v-45035942="">
                                            <label class="f5 b gray mb2" data-v-45035942="">Do you want delete the item </label>
                                            <div class="cp-validating-gravatar-input form-group ember-view" data-v-45035942="">
                                                <div class="flex flex-auto" data-v-45035942=""></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide-panel-shadow-cover-bottom z-5" data-v-45035942=""></div>
            </div>
        </div>
        <div class="mh4 ember-view" data-v-45035942=""></div>
        <div class="hk-slide-panel-footer relative shadow-outer-1 flex justify-center items-center z-2 pa4 ember-view" data-v-45035942="">
            <button onclick="hidden_confirmation_box()" class="async-button w-50 mr2 default hk-button--secondary ember-view" type="button" data-v-45035942="">
                Cancel
            </button>
            <button value="" id="delete_item" onclick="delete_item()" class="async-button w-50 default hk-button--primary ember-view" type="submit" data-v-45035942="">
                Yes
            </button>
        </div>
    </div>
    </div>
</div>
</div>

<script type="text/javascript">
    function show_account_list() {
        var account_list = document.getElementById("glostick__menu--account");
        if (account_list.style.opacity == 0) {
            account_list.style.opacity = 1
            account_list.style.display = 'block';
        } else {
            account_list.style.opacity = 0
            account_list.style.display = 'none';
        }
    }

    function show_confirmation_box(resoure, id) {
        var confirmation_box = document.getElementById("confirmation_box");
        confirmation_box.style.transform = 'translateX(0px)'
        var delete_item = document.getElementById("delete_item");
        delete_item.value = resoure+','+id
    }

    function hidden_confirmation_box() {
        var confirmation_box = document.getElementById("confirmation_box");
        confirmation_box.style.transform = 'translateX(400px)'
    }

    function delete_item() {
        var delete_item = document.getElementById("delete_item");
        values = delete_item.value.split(',')
        var ajax = new XMLHttpRequest();
        console.log(values[0])
        ajax.open('delete', '/' + values[0] + '/' + values[1], false)
        ajax.setRequestHeader ('X-CSRFToken', '{{ csrf_token }}')
        ajax.send()
        console.log(ajax.status)
        if (ajax.status == 204){
            location.href = '/' + values[0];
        }
    }

    document.addEventListener('mousedown', (e) => {
        var t1 = document.getElementsByClassName('account_list_btn_cls')[0]
        if (!e.path.includes(t1)) {
            var account_list = document.getElementById("glostick__menu--account");
            account_list.style.display = 'none';
            account_list.style.opacity = 0;
        }
        var confirmation_box = document.getElementById('confirmation_box')
        if (!e.path.includes(confirmation_box)) {
            confirmation_box.style.transform = 'translateX(400px)'
        }
    })
</script>
<svg id="SvgjsSvg1001" width="2" height="0" xmlns="http://www.w3.org/2000/svg"
     version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:svgjs="http://svgjs.com/svgjs"
     style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;">
    <defs id="SvgjsDefs1002"></defs>
    <polyline id="SvgjsPolyline1003" points="0,0"></polyline>
    <path id="SvgjsPath1004" d="M0 0 "></path>
</svg>
</body>
</html>