{% include 'header.html' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/api.css') }}"> {% include 'wrapper.html' %}
<div class="container-api">

    <h2 style="font-weight: bolder;font-size: 36px;" class="inline">API Control</h2>
    <button class="btn btn-primary add-token-btn inline" onclick="createNewToken()">Create New Token</button>
    <div class="tokens">
    {% for token in access_tokens %}
        <div class="token">
            <span class="token-head">
                <a href="#" class="delete-token" id="{{ token[0] }}" onclick="this.parentElement.parentElement.remove()"><i class="fas fa-trash"></i></a>
                <h3 class="name">{{ token[1] }}</h3>
                <span class="validity-time">{{ token[4] }}</span>
            </span>
            <span class="token-options">
                <div class="permissions inline" style="display: inline-block;">
                    {% if token[3].servers.read or token[3].servers.write  %}
                        <div class="perm">
                            <span>{% if token[3].servers.read %}Servers:Read {% endif %}{% if token[3].servers.write %}Servers:Write{% endif %}</span>
                        </div>
                    {% endif %}
                    {% if token[3].users.read or token[3].users.write %}
                        <div class="perm">
                            <span>{% if token[3].users.read %}Users:Read {% endif %}{% if token[3].users.write %}Users:Write{% endif %}</span>
                        </div>
                    {% endif %}
                    {% if token[3].files.read or token[3].files.write  %}
                        <div class="perm">
                            <span>{% if token[3].files.read %}Files:Read {% endif %}{% if token[3].files.write %}Files:Write{% endif %}</span>
                        </div>
                    {% endif %}
                    {% if token[3].exploits.read or token[3].exploits.write  %}
                        <div class="perm">
                            <span>{% if token[3].exploits.read %}Exploits:Read {% endif %}{% if token[3].exploits.write %}Exploits:Write{% endif %}</span>
                        </div>
                    {% endif %}
                    {% if token[3].logs.read or token[3].logs.write  %}
                        <div class="perm">
                            <span>{% if token[3].logs.read %}Logs:Read {% endif %}{% if token[3].logs.write %}Logs:Write{% endif %}</span>
                        </div>
                    {% endif %}
                </div>
            </span>
        </div>
    {% endfor %}
    </div>
</div>
<div class="floating-box create-token-box">
    <h2 class="head">Create New Token</h2>
    <form id="create_token_form">
        <div class="content-center">
            <br>
            <input type="text" name="token-name" id="token-name-input" size="25" class="token-name" placeholder="Token Name">
            <br><br>
            <div class="permissions">
                <div class="perm-box">
                    <div class="perm-head">
                        <input type="checkbox" div="head-checkbox" name="servers-rw"> Servers
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="servers-r"> Read
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="servers-w"> Write
                    </div>
                </div>
                <div class="perm-box">
                    <div class="perm-head">
                        <input type="checkbox" div="head-checkbox" name="users-rw"> Users
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="users-r"> Read
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="users-w"> Write
                    </div>
                </div>
                <div class="perm-box">
                    <div class="perm-head">
                        <input type="checkbox" div="head-checkbox" name="files-rw"> Files
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="files-r"> Read
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="files-w"> Write
                    </div>
                </div>
                <div class="perm-box">
                    <div class="perm-head">
                        <input type="checkbox" div="head-checkbox" name="exploits-rw"> Exploits
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="exploits-r"> Read
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="exploits-w"> Write
                    </div>
                </div>
                <div class="perm-box">
                    <div class="perm-head">
                        <input type="checkbox" div="head-checkbox" name="logs-rw"> Logs
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="logs-r"> Read
                    </div>
                    <div class="perm-sub">
                        <input type="checkbox" div="sub-checkbox" name="logs-w"> Write
                    </div>
                </div>
            </div>
            <br><br>
            <div class="validity">
                <input type="text"  class="validity-time" id="datetime" name="datetime" value="10/5/2023 13:53:12">
                <br>
                <div class="validity-btns">
                    <a href="javascript:addMinutes(10)" id="10m" class="time-btn">+10 Minutes</a>
                    <a href="javascript:addHours(1)" id="1h" class="time-btn">+1 Hour</a>
                    <a href="javascript:addDays(1)" id="1d" class="time-btn">+1 Day</a>
                    <a href="javascript:addWeek()" id="1w" class="time-btn">+1 Week</a>
                    <a href="javascript:setCurrentDatetime()" id="reset" class="time-btn blue">Reset</a>
                </div>
                <br>
            </div>
            <br><br>    
            <a class="create-token floating-btn" onclick="addAccessToken()" title="Create New Token">
                <i class="fas fa-edit"></i><span> Create</span>
            </a>
        </div>
    </form>
</div>

<div class="floating-box show-token-box">
    <h2 class="head">Copy API Token</h2>
    <div class="explain">This token will only be visible here. Keep it safe.</div>
    <div class="token-input">
        <input type="text" size="50" id="new-token" value="awdawda" disabled>
        <a href="#" class="copy-token" onclick="copyToClipboard($('#new-token').val());"><i class="fa fa-copy"></i></a>
    </div><br><br><br><br><br>
    <a class="close-token floating-btn" onclick="location.reload()" title="Close Window">Close
    </a>
</div>

{% include 'wrapper_end.html' %}
<script>
    key_sc($(".add-token-btn"), 'n');
    key_sc($(".add-token-btn"), 'c');
</script>
<script src="{{ url_for('static', filename='js/api.js') }}"></script>
{% include 'footer.html' %}