{% extends "base.html" %}
{% block body %}
<div style="margin-top:5px;max-height:calc(40vh);" class="card border border-dark shadow" id="operations_table" >
    <div class="card-header bg-header border border-dark shadow text-white">
        <h2 style="display:inline-block"><span class="operator">Operations</span> Management</h2>
        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-md" @click="new_operation_button()" style="display:inline-block;float:right"><i class="fas fa-plus"></i> Operation</button>
     </div>
        <table class="table table-striped {{config['table-color']}} bg-card-body" style="margin-bottom:0;overflow-y:auto">
            <tr>
                <th style="width:10rem"><b>Modify Operation</b></th>
                <th style="width:10rem"><b>Block Lists</b></th>
                <th onclick="sort_table(this)" style="width:20rem"><b>Name</b></th>
                <th onclick="sort_table(this)" style="width:10rem"><b>Operation Lead</b></th>
                <th onclick="sort_table(this)"><b>Members</b></th>
                <th style="width:12rem"><b>Operation Status</b></th>
            </tr>
        <!-- Repeat this for each operation -->
            <tr v-for="o in operations" :key="o.name">
                <td style="text-align:center">
			        <button v-show="o.admin == username || admin" type="button" class="btn btn{{config['outline-buttons']}}info btn-sm" @click="modify_button(o)"><i class="fas fa-edit"></i></button>
		        </td>
                <td style="text-align:center">
			        <button v-show="o.admin == username || admin" type="button" class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="modify_acls_button(o)"><i class="fas fa-edit"></i></button>
		        </td>
                <td>[[ o.name ]]
                    <template v-if="o.complete">
                        &nbsp;( Completed )
                    </template>
                </td>
                <td>[[ o.admin ]]</td>
                <td><span v-for="m in o.members">[[m.username]]&nbsp;</span></td>
                <td>
                    <template v-if="o.name == current_operation">
                        Current Operation
                    </template>
                    <template v-else-if="is_member(o, username)">
                        <button type="button" class="btn btn{{config['outline-buttons']}}info btn-sm" @click="set_current_operation(o)">Make Current Operation</button>
                    </template>
                    <template v-else>
                        Not a member of Operation
                    </template>
                </td>
            </tr>
        <!-- End of the repeating -->
        </table>
</div>
<!-- THIS IS OUR MODAL FOR MODIFYING OPERATION -->
<div class="modal fade" id="operationModifyModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Modify Operation</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" id="operationModifyBody" >
                You can modify aspects of an operation here.
                <table style="width:100%" class="table table-striped {{config['table-color']}}">
                    <tr >
                        <td style="width:150px;padding-left:10px">Name</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="name" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Operation Lead</td>
                        <td colspan="2"> <select class="form-control" v-model="admin">
                            <option v-for="a in admin_options" :val="a">[[a]]</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">
                            Complete Operation
                        </td>
                        <td colspan="2"><i class="fas fa-question-circle" style="padding-right:20px" data-toggle="tooltip" title="Mark operation as complete and raise warnings for new callbacks"></i>
                            <span class="material-switch pull-right"><input class="form-control" type="checkbox" id="operationstatus" v-model="complete"><label for="operationstatus" class="btn-danger"></label></span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Slack WebHook</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="webhook" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Channel</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="channel" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Display Name</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="display_name" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Icon Emoji</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="icon_emoji" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Icon URL</td>
                        <td colspan="2"><input class="form-control" type="text" v-model="icon_url" size="95%"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Webhook Message</td>
                        <td colspan="2"><textarea class="form-control" type="text" v-model="webhook_message" rows="5"></textarea></td>
                    </tr>
                </table>
                <table style="width:100%" class="table table-striped {{config['table-color']}}">
                    <tr>
                        <th>Operator</th>
                        <th>In Operation?</th>
                        <th>Mode</th>
                    </tr>
                    <tr v-for="(mem, i) in operation_members">
                        <td style="padding-left:10px">[[mem.username]]</td>
                        <td>
                            <span class="material-switch pull-right"><input class="form-control" type="checkbox" :id="'moduser' + i" :value="mem.selected" v-model="mem.selected"><label :for="'moduser' + i" class="btn-info"></label></span>
                        </td>
                        <td>
                            <select class="form-control" v-model="mem.view_mode" :value="mem.view_mode">
                                <option v-for="vm in view_options" :value="vm">[[vm]]</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']}}primary" data-dismiss="modal" id="operationModifySubmit">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR MODIFYING OPERATION -->
<!-- THIS IS OUR MODAL FOR MODIFYING OPERATION ACLS-->
<div class="modal fade" id="operationModifyACLsModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Modify Access Controls</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" id="operationModifyACLsBody">
                You can restrict operator's access to commands here.
                <table cellpadding="10" style="width:100%" class="table table-striped {{config['table-color']}}">
                    <tr>
                        <th><b>Operator</b></th>
                        <th><b>Applied List of Denied Commands</b></th>
                    </tr>
                    <tr v-for="m in members">
                        <td style="padding-left:10px">[[m.username]]</td>
                        <td style="text-align:center">
                            <select class="form-control" v-model="m.base_disabled_commands" :value="m.base_disabled_commands">
                                <option value="null">None</option>
                                <option v-for="p in denied_command_profiles" :value="p">[[p]]</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']}}primary" data-dismiss="modal" id="operationModifyACLsSubmit">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR MODIFYING OPERATION ACLS -->
<!-- THIS IS OUR MODAL FOR CREATING OPERATION ACLS-->
<div class="modal fade" id="operationCreateACLsModal" 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 Disabled Commands List</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" style="padding-top:0">
                Create a template for disabling certain commands that can be applied to an operator.<br>
                Profile Name: <input class="form-control" type="text" v-model="name" size="90%">
                <div v-for="(data, key, i) in selected_commands" class="card-header bg-card-header" style="padding-top:0">
                    <h3 class="sticky-top" style="width:100%;background-color:{{config['bg-header-dark']}};margin-top:0;padding-top:0" ><span class="operator">[[key]]</span></h3>
                    <table cellpadding="10" style="width:100%;;overflow-y:scroll" class="table table-striped {{config['table-color']}}" >
                        <tr>
                            <th style="text-align:left;width:5rem">
                                <b>Disabled?</b>
                            </th>
                            <th  onclick="sort_table(this)" style="text-align:left;width:7rem">
                                <b>Admin?</b>
                            </th>
                            <th onclick="sort_table(this)" style="text-align:left">
                                <b>Command Name</b>
                            </th>
                        </tr>
                        <tr v-for="command in data">
                            <td style="padding-left:10px">
                                <span class="material-switch pull-right"><input class="form-control" type="checkbox" :checked="command['disabled']" v-model="command['disabled']" :id="'command' + command.id"><label :for="'command' + command.id" class="btn-danger"></label></span>
                            </td>
                            <td>[[command.needs_admin]]</td>
                            <td>[[command.cmd]]</td>
                        </tr>
                    </table>
                </div>
            </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="operationCreateACLsSubmit">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR CREATING OPERATION ACLS -->
<br>
<div class="card border border-dark bg-card-body" id="view_acls" style="margin-top:5px">
    <div class="card-header bg-header text-white border border-dark shadow">
        <h2 style="display:inline-block"><span class="operator">Command Block</span> Lists</h2>
        <button type="button" class="btn btn{{config['outline-buttons']}}success btn-md" onclick="new_acl_button()" style="display:inline-block;float:right"><i class="fas fa-plus"></i> Block List</button>
    </div>
    <div class="card-body border-0 shadow bg-card-body" style="padding:0">
        <table class="table table-striped {{config['table-color']}}" style="margin-bottom: 0">
            <tr>
                <th>Delete</th>
                <th>Modify</th>
                <th>Template Name</th>
                <th>Blocked List</th>
            </tr>
            <tr v-for="i in disabled_profiles">
                <td style="padding-left:10px;width:2rem">
                    <button class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="delete_instance(i)"><i class="fas fa-trash-alt"></i></button>
                </td>
                <td style="width:2rem">
                    <button class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="edit_profile(i)"><i class="fas fa-edit"></i></button>
                </td>
                <td style="width:20rem">
                    [[i.name]]
                </td>
                <td>
                    <div v-for="(data, ptype, i) in i.values">
                        <span class="operator" style="display:inline-block"><h4>[[ptype]]</h4></span>
                        <span>[[display_list(data)]]</span>
                      </div>
                </td>
            </tr>
        </table>
    </div>
</div>

{% endblock %}

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

{% block body_config %}
{% endblock %}