{% extends 'cmStructureRegistry/base.html' %}
{% load i18n %}
{% load humanize %}

{% block header_nav_brand %}
    {% translate "Timers" %}
{% endblock %}

{% block details %}

{% csrf_token %} 
{% verbatim %}
<div class="fBlack bgDark main-body" style=" min-height: 400px">
    <div id="vue-app">
        <div v-if="showModal" @keydown.esc="closeModal" v-cloak>
            <transition name="modal">
                <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div class="modal-title">Add Timer</div>
                                    <button type="button" class="close" v-on:click="closeModal()">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <timer-add-component ref="addTimer" :structure_id="curr_structure_id" v-on:timer-added="timerAdded" v-on:created="initModal" v-on:timer-closed="timerClosed"></timer-add-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
        <div v-if="showDeleteConfirmation" @keydown.esc="closeModal" v-cloak>
            <transition name="modal">
                <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div class="modal-title">Delete Timer</div>
                                    <button type="button" class="close" v-on:click="closeModal()">
                                        <i class="fa fa-times"></i>
                                    </button>                                    
                                </div>
                                <div class="modal-body">
                                    <timer-delete-component :timerid="timerid" v-on:deleted="timerDeleted" v-on:canceled="deleteCanceled" v-on:created="initModal"></timer-delete-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
        <div v-if="showFCModal" @keydown.esc="closeModal" v-cloak>
            <transition name="modal">
                <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" v-on:click="closeModal()">
                                        <i class="fa fa-times"></i>
                                    </button>
                                    <div class="modal-title">Set Lead FC</div>
                                </div>
                                <div class="modal-body">
                                    <timer-fc-component :timerid="timerid" :fc="curr_fc" v-on:canceled="closeModal" v-on:modified="fcModified" v-on:created="initModal"></timer-fc-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
        <div class="timer-header">
            <div v-if="canAdd" style="float:left">
                <input type="button" value="Add Timer" v-on:click="addTimer(null)" />
            </div>
            <div style="float:right">
                <div class="staging-search">
                    <system-picker ref="system" is-async="true" min-chars="2" enable-clear-option="true" placeholder="Staging System..." v-on:item-selected="stagingSystemChanged"></system-picker>
                </div> 
            </div>
            <div style="clear:both"></div>            
        </div>
        <div class="sub-header">
            Open Timers
        </div>
        <div>
            <timer-component type="open" :admin="isAdmin" :add="canAdd" :edit="canEdit" :addl-timer-perm="hasMorePerms" :staging-system-id="staging_system" ref="openTimer" v-on:delete-timer="deleteTimer" v-on:set-fleetcommander="loadSetFC"></timer-component>
        </div>
        <div class="spacer"></div>
        <div class="sub-header">
            Recent Timers
        </div>
        <div>
            <timer-component type="recent" :admin="isAdmin" :add="canAdd" :edit="canEdit" :addl-timer-perm="hasMorePerms" ref="recentTimer" v-on:add-timer="addTimer"></timer-component>
        </div>
        <div class="spacer"></div>
        <div class="spacer"></div>
    </div>
</div>
{% endverbatim %}

{% endblock %}

{% block extra_css %}

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css">
    <link rel="stylesheet" href="/static/cmStructureRegistry/css/main.css?v={{ CM_VERSION }}">
{% endblock %}

{% block extra_javascript %}

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script src="/static/cmStructureRegistry/scripts/timeentry.min.js?v={{ CM_VERSION }}"></script>
    <script src="/static/cmStructureRegistry/scripts/reltime.js?v={{ CM_VERSION }}"></script>
    <script src="/static/cmStructureRegistry/scripts/countdown.min.js?v={{ CM_VERSION }}"></script>
    <script src="/static/cmStructureRegistry/scripts/moment-countdown.min.js?v={{ CM_VERSION }}"></script> 


    {% autoescape off %}

    {% include 'cmStructureRegistry/vue/autocomplete.html' %}
    {% include 'cmStructureRegistry/vue/timer-add-component.html' %}
    {% include 'cmStructureRegistry/vue/timer-delete-component.html' %}
    {% include 'cmStructureRegistry/vue/timer-fc-component.html' %}
    {% include 'cmStructureRegistry/vue/timer-component.html' %}

    {% endautoescape %}

<script type="module">

    import { createApp } from '//unpkg.com/vue@3/dist/vue.esm-browser.prod.js';
    import DatePicker  from '/static/cmStructureRegistry/components/vue-datepicker.js?v={{ CM_VERSION }}'
    import SystemPicker from '/static/cmStructureRegistry/components/vue-systempicker.js?v={{ CM_VERSION }}'
    import TimePicker from '/static/cmStructureRegistry/components/vue-timepicker.js?v={{ CM_VERSION }}'
    import RegionPicker from '/static/cmStructureRegistry/components/vue-regionpicker.js?v={{ CM_VERSION }}'
    import DurationPicker from '/static/cmStructureRegistry/components/vue-durationpicker.js?v={{ CM_VERSION }}'
    import StructureRegistryPicker from '/static/cmStructureRegistry/components/vue-structureregistrypicker.js?v={{ CM_VERSION }}'   
    import Countdown from '/static/cmStructureRegistry/components/vue-countdown.js?v={{ CM_VERSION }}'        
    import Timer from '/static/cmStructureRegistry/components/Timers.js?v={{ CM_VERSION }}'
    import TimerAdd from '/static/cmStructureRegistry/components/TimerAdd.js?v={{ CM_VERSION }}' 
    import TimerFC from '/static/cmStructureRegistry/components/TimerFC.js?v={{ CM_VERSION }}'      
    import TimerDelete from '/static/cmStructureRegistry/components/TimerDelete.js?v={{ CM_VERSION }}'       

    var _vue = createApp({
        el: '#vue-app',
        data: function () {
            return {
                showModal: false,
                showDeleteConfirmation: false,
                showFCModal: false,
                token: document.querySelector('[name=csrfmiddlewaretoken]').value,
                header: 'X-CSRFToken',
                isAdmin: {{ perms.cmStructureRegistry.delete_timer|yesno:"true,false" }},
                canAdd: {{ perms.cmStructureRegistry.manage_timers|yesno:"true,false" }},
                canEdit: {{ perms.cmStructureRegistry.manage_timers|yesno:"true,false" }},
                hasMorePerms: {{ perms.cmStructureRegistry.skirmish_timer|yesno:"true,false" }} || {{ perms.cmStructureRegistry.tactical_timer|yesno:"true,false" }},
                timerid: null,
                curr_structure_id: null,
                curr_fc: '',
                staging_system: null
            }
        },
        methods: {
            closeModal: function () {
                this.showModal = false;
                this.showDeleteConfirmation = false;
                this.showFCModal = false;
            },
            addTimer: function (id) {

                this.showModal = true;

                if (id != null) {
                     var me = this;
                    this.$nextTick(function () {
                        me.$refs.addTimer.loadTimer(id);
                     });
                }
            },
            timerAdded: function () {
                this.showModal = false;
                this.$refs.openTimer.loadData();
            },
            timerClosed: function() {
                this.showModal = false;
            },
            deleteTimer: function (id) {
                this.timerid = id;
                this.showDeleteConfirmation = true;
            },
            timerDeleted: function () {
                this.showDeleteConfirmation = false;
                this.$refs.openTimer.loadData();
                this.$refs.recentTimer.loadData();
            },
            deleteCanceled: function () {
                this.showDeleteConfirmation = false;
            },
            initModal: function () {

                $(".modal-header").on("mousedown", function(mousedownEvt) {
                    var $draggable = $(this);
                    var x = mousedownEvt.pageX - $draggable.offset().left,
                        y = mousedownEvt.pageY - $draggable.offset().top;
                    $("body").on("mousemove.draggable", function(mousemoveEvt) {
                        $draggable.closest(".modal-dialog").offset({
                            "left": mousemoveEvt.pageX - x,
                            "top": mousemoveEvt.pageY - y
                        });
                    });
                    $("body").one("mouseup", function() {
                        $("body").off("mousemove.draggable");
                    });
                    $draggable.closest(".modal").one("bs.modal.hide", function() {
                        $("body").off("mousemove.draggable");
                    });
                });

            },
            loadSetFC: function (id, fc) {
                this.timerid = id;
                this.curr_fc = fc;
                this.showFCModal = true;
            },
            fcModified: function () {
                this.$refs.openTimer.loadData();
                this.closeModal();
            },
            closeModal: function() {
                this.showModal =  false;
                this.showDeleteConfirmation = false;
                this.showFCModal =  false;
            },
            stagingSystemChanged: function(system) {
                this.staging_system = system.id;
            }
        }
    });

    _vue.config.compilerOptions.delimiters = ['[[', ']]'];

    _vue.component("date-picker", DatePicker);
    _vue.component("system-picker", SystemPicker);
    _vue.component("region-picker", RegionPicker);
    _vue.component("time-picker", TimePicker);
    _vue.component("duration-picker", DurationPicker);
    _vue.component("countdown", Countdown);
    _vue.component("structureregistry-picker", StructureRegistryPicker);
    _vue.component("timer-component", Timer);   
    _vue.component("timer-add-component", TimerAdd);
    _vue.component("timer-fc-component", TimerFC);    
    _vue.component("timer-delete-component", TimerDelete);                    

    _vue.mount('#vue-app');

</script>   

{% endblock %}     

{% block extra_script %}

    countdown.setLabels(
        'ms|s|m|h|d|w| month| year| decade| century| millennium',
        'ms|s|m|h|d|w| months| years| decades| centuries| millennia',
        ' ',
        ' ',
        '',
        function(n){ return n.toString(); });

    toastr.options = {
        "positionClass": "toast-bottom-center",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "4000",
        "extendedTimeOut": "1000"
        }
        
    document.addEventListener("DOMContentLoaded", function () {
        var theme = document.documentElement.getAttribute("data-theme");
        if (theme) {
            if (theme === "darkly") {

                var style = document.createElement("style");

                style.innerHTML = `
                    .sub-header {
                        color: #ddd;
                    }

                    .header-label {
                        color: #ddd;
                    }

                    .timer-detail {
                        background: #ddd;
                    }                
                `;

                document.head.appendChild(style);
            }
        }
    });         


{% endblock %}