{% extends "base.html" %}
{% block body %}
<div id="page_heading" style="margin-top:5px">
    <div style="resize: vertical; overflow:visible" class="card border border-dark shadow bg-card-body" v-if="!current_operator.admin">
        <div class="card-header bg-header border border-dark shadow text-white">
            <h2 ><span class="operator">User</span> Settings</h2>
        </div>
            <table class="table table-condensed table-striped {{config['table-color']}}" style="margin-bottom:0">
                <tr>
                    <th>Delete Account</th>
                    <th>Change Password</th>
                    <th>Change Username</th>
                    <th>Change UI Colors</th>
                    <th >Use UTC Timestamps</th>
                    <th onclick="sort_table(this)">Last Login</th>
                    <th onclick="sort_table(this)">Account Creation Date</th>
                    <th onclick="sort_table(this)">Admin Status</th>
                </tr>
                <tr>
                    <td ><button type="button" class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="delete_button(current_operator)" ><i class="fas fa-trash-alt"></i></button></td>
                    <td ><button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="password_button(current_operator)" ><i class="fas fa-user-edit"></i></button></td>
                    <td ><button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="username_button(current_operator)" ><i class="fas fa-user-edit"></i></button></td>
                    <td ><button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="config_button(current_operator)">Change</button></td>
                    <td><span class="material-switch pull-right"><input class="form-control" type="checkbox" v-model="current_operator.view_utc_time" @change="change_time(current_operator)" :id="'view_utc' + current_operator.id"><label :for="'view_utc' + current_operator.id" class="btn-info"></label></span></td>
                    <td >[[ toLocalTime(current_operator.last_login) ]]</td>
                    <td >[[ toLocalTime(current_operator.creation_time) ]]</td>
                    <td >[[ current_operator.admin ]]</td>
                </tr>
            </table>
    </div>
</div>
<div style="resize: vertical; overflow:visible" class="card border border-dark shadow bg-card-body" id="operators_table" v-if="current_operator.admin">
    <div class="card-header bg-header border border-dark shadow text-white">
        <h2 style="display:inline-block"><span class="operator">Admin</span> Settings</h2>
        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-md" @click="new_user_button()" style="width:10%;float:right"><i class="fas fa-plus"></i> User</button>
    </div>
        <table class="table table-condensed table-striped {{config['table-color']}} border border-dark shadow" style="margin-bottom:0">
            <tr>
                <th><b>Delete</b></th>
                <th onclick="sort_table(this)" ><b>Operator</b></th>
		        <th><b>Change Password</b></th>
                <th><b>Change Username</b></th>
                <th><b>Change UI Colors</b></th>
                <th ><b>View UTC Timestamps</b></th>
                <th onclick="sort_table(this)"><b>Toggle Admin</b></th>
                <th onclick="sort_table(this)"><b>Last Login</b></th>
                <th onclick="sort_table(this)"><b>Creation Date</b></th>
                <th onclick="sort_table(this)"><b>Admin</b></th>
                <th onclick="sort_table(this)"><b>Active?</b></th>
            </tr>
        <!-- Repeat this for each operator -->
            <tr v-for="o in operators" :key="o.username">
                <td style="text-align:center">
                    <button type="button" class="btn btn{{config['outline-buttons']}}danger btn-sm" v-if="o.id != 1" @click="delete_operator_button(o)" ><i class="fas fa-trash-alt"></i></button>
                </td>
                <td style="text-align:left">[[ o.username ]]</td>
                <td >
                    <button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="set_password_button(o)">Change Password</button>
                </td>
                <td >
                    <button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="change_username_button(o)">Change Username</button>
                </td>
                <td >
                    <button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="change_config_button(o)"><i class="fas fa-user-edit"></i></button>
                </td>
                <td >
                    <span class="material-switch"><input class="form-control" type="checkbox" v-model="o.view_utc_time" @change="change_time(o)" :id="'view_utc' + o.id"> <label :for="'view_utc' + o.id" class="btn-info"></label>
                    </span>
                </td>
                <td >
                    <button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="change_admin_button(o)" v-if="o.id != 1">Toggle Admin</button>
                </td>
                <td >[[ toLocalTime(o.last_login) ]]</td>
                <td >[[ toLocalTime(o.creation_time) ]]</td>
                <td >[[ o.admin ]]</td>
                <td>
                    <div v-if="o.active">
                        <button type="button" class="btn btn{{config['outline-buttons']}}danger btn-sm" v-if="o.id != 1" @click="change_active_button(o)">Deactivate</button>
                    </div>
                    <div v-else>
                        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-sm" @click="change_active_button(o)">Activate</button>
                    </div>
                </td>
            </tr>
        <!-- End of the repeating -->
        </table>
    <!-- THIS IS OUR MODAL FOR CHANGING OPERATOR PASSWORD-->
    <div class="modal fade" id="newOperatorModal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">

                    <h3>Create a new user</h3>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <table cellpadding="10" style="width:100%">
                        <tr>
                            <td style="width:150px">Username</td>
                            <td><input class="form-control" type="text" v-model="new_username" size="80%"></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td> <input class="form-control" type="password" v-model="new_password_1" size="80%"></td>
                        </tr>
                        <tr>
                            <td>Password Again</td>
                            <td><input class="form-control" type="password" v-model="new_password_2" size="80%"></td>
                        </tr>
                    </table>
                </div>
                  <div class="modal-footer">
                    <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="newOperatorSubmit">Create</button>
                  </div>
            </div>
        </div>
    </div>
    <!-- END MODAL FOR CHANGING OPERATOR PASSWORD-->
</div>
<br>
<div style="resize: vertical; overflow:visible" class="card border border-dark shadow bg-card-body" id="apitokens_table">
    <div class="card-header bg-header border border-dark shadow text-white">
        <h2 style="display:inline-block"><span class="operator">API</span> Tokens</h2>
        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-md" @click="create_apitoken_button()" style="width:10%;float:right"><i class="fas fa-plus"></i> Token</button>
    </div>
        <table class="table table-condensed table-striped {{config['table-color']}}" style="width:100%;table-layout:fixed;word-wrap: break-word;margin-bottom:0">
            <tr>
                <th style="width:5rem;text-align:center"><b>Delete</b></th>
                <th onclick="sort_table(this)" style="width:7rem"><b>Active?</b></th>
                <th onclick="sort_table(this)" style="width:10rem"><b>Token Type</b></th>
                <th onclick="sort_table(this)"><b>Token Value</b></th>
                <th onclick="sort_table(this)" style="width:12rem"><b>Creation time</b></th>
                <th onclick="sort_table(this)" style="width:10rem"><b>Operator</b></th>
            </tr>
            <tr v-for="token in tokens" :key="token.id">
                <td style="text-align:center">
                    <button type="button" class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="delete_apitoken_button(token)"><i class="fas fa-trash-alt"></i></button>
                </td>
                <td>
                    <template v-if="token.active">
                        <button type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="toggle_active_button(token)">Deactivate</button>
                    </template>
                    <template v-else>
                        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-sm" @click="toggle_active_button(token)">Reactivate</button>
                    </template>
                </td>
                <td>
                    [[token.token_type]]
                </td>
                <td>
                    [[token.token_value]]
                </td>
                <td>
                    [[toLocalTime(token.creation_time)]]
                </td>
                <td>
                    [[token.operator]]
                </td>
            </tr>
        </table>
</div>
<!-- THIS IS OUR MODAL FOR CREATING APITOKEN -->
<div class="modal fade" id="apitokenCreateModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Create an API Token</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Be careful using leaving API Tokens unattended, but they can be revoked. <br>
                C2 API tokens have VERY limited scope in their capabilities. <br>
                User API tokens grant full user access.
                <table style="width:100%">
                    <tr>
                        <td>
                            Token Type
                        </td>
                        <td>
                            <select class="form-control" id="apitokenCreateTokenType">
                                <option value="User">User</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" id="apitokenCreateSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR CREATING APITOKEN -->

<!-- THIS IS OUR MODAL FOR DELETING OPERATOR -->
<div class="modal fade" id="operatorDeleteModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Are you sure? </h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}danger" data-dismiss="modal" id="operatorDeleteSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR DELETING OPERATOR -->
<!-- THIS IS OUR MODAL FOR CHANGING OPERATOR PASSWORD-->
<div class="modal fade" id="operatorPasswordModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">

                <h3>Are you sure? </h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" id="operatorUpdatePasswordBody">
                If you're admin, you can leave the old password field blank.
                <table cellpadding="10" style="width:100%">
                    <tr>
                        <td style="width:150px">Old Password</td>
                        <td><input class="form-control" type="password" class="form-control" id="operatorOldPassword" size="80%"></td>
                    </tr>
                    <tr>
                        <td>New Password</td>
                        <td> <input class="form-control" type="password" id="operatorNewPassword1" size="80%"></td>
                    </tr>
                    <tr>
                        <td>New Password Again</td>
                        <td><input class="form-control" type="password" id="operatorNewPassword2" size="80%"></td>
                    </tr>
                </table>
            </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="operatorPasswordSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR CHANGING OPERATOR PASSWORD-->
<!-- THIS IS OUR MODAL FOR CHANGING OPERATOR USERNAME-->
<div class="modal fade" id="operatorUsernameModal" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Are you sure? Your username must be unique.</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" id="operatorUpdateUsernameBody">
                <table cellpadding="10" style="width:100%">
                    <tr>
                        <td style="width:150px">New Username</td>
                        <td><input class="form-control" type="text" id="operatorNewUsername" size="32"></td>
                    </tr>
                </table>
            </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="operatorUsernameSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR CHANGING OPERATOR USERNAME-->
<!-- THIS IS OUR MODAL FOR CHANGING OPERATOR CONFIG-->
<div class="modal fade" id="operatorConfigModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Change the config for UI</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <p style="padding-left:10px">Changes will not be pushed to the server until you confirm the changes.</p>

            <div class="modal-body" id="operatorUpdateConfigBody">
                <button class="btn btn{{config['outline-buttons']}}info btn-sm" @click="get_light_config()" style="display:inline">Get Light Config</button>
            <button class="btn btn{{config['outline-buttons']}}info btn-sm" @click="get_dark_config()" style="display:inline">Get Dark Config</button>
                <table class="table table-dark table-striped" cellpadding="10" style="width:100%">
                    <tr>
                        <th></th>
                        <th><b>Config Key</b></th>
                        <th><b>Config Value</b></th>
                        <th><b>Config Color</b></th>
                    </tr>
                    <template v-for="entry in config">
                        <tr>
                            <td><button class="btn btn{{config['outline-buttons']}}danger" @click="remove_key_config(entry.key)"><i class="fas fa-trash-alt"></i></button></td>
                            <td><input type="text" class="form-control" v-model="entry.key" :value="entry.key" size="40"></td>
                            <td><input type="text" class="form-control" v-model="entry.value" :value="entry.value"></td>
                            <td>
                                <div :style="'width:40px;height:40px;background-color:' + entry.value"></div>
                            </td>
                        </tr>
                    </template>
                </table>
                <button class="btn btn{{config['outline-buttons']}}success" @click="add_key_config()"><i class="fas fa-plus"></i> Key</button>

            </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="operatorConfigSubmit">Confirm Change</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR CHANGING OPERATOR CONFIG-->
{% endblock %}

{% block scripts %}
{% include "settings.js" %}
{% endblock %}

{% block body_config %}

{% endblock %}