{% extends "public/base.html" %}
{% load staticfiles %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% block title %}Alliance Auth{% endblock %}

{% block page_title %}{% trans "Fleet Operation Management" %}{% endblock page_title %}
{% block extra_css %}{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12">
        <h1 class="page-header text-center">{% trans "Fleet Operation Timers" %}
            <div class="text-right">
                {% if perms.auth.optimer_management %}
                    <a href="{% url 'auth_add_optimer_view' %}" class="btn btn-success">{% trans "Create Operation" %}</a>
                {% endif %}
            </div>
        </h1>
     <div class="col-lg-12 text-center row">
        <div class="label label-info text-left">
            <b>{% trans "Current Eve Time:" %} </b>
        </div><div class="label label-info text-left" id="current-time"></div>
        <br  />
     </div>
     {% if optimer %}
        <table class="table table-responsive">
            <tr>
                <th class="text-center">{% trans "Operation Name" %}</th>
		<th class="text-center">{% trans "Doctrine" %}</th>
                <th class="text-center">{% trans "Form Up System" %}</th>
                <th class="text-center">{% trans "Form Up Location" %}</th>
                <th class="text-center">{% trans "Start Time" %}</th>
                <th class="text-center">{% trans "Local Time" %}</th>
		<th class="text-center">{% trans "Duration" %}</th>
                <th class="text-center">{% trans "FC" %}</th>
                <th class="text-center">{% trans "Details" %}</th>
		<th class="text-center">{% trans "Post Time" %}</th>
		{% if perms.auth.optimer_management %}
                	<th class="text-center">{% trans "Creator" %}</th>
		        <th class="text-center">{% trans "Action" %}</th>
                {% endif %}
            </tr>

                {% for ops in optimer %}
                    <tr>
                	<td style="width:150px" class="text-center">{{ ops.operation_name }}</td>
                	<td style="width:150px" class="text-center">{{ ops.doctrine }}</td>
                	<td class="text-center">
                            <a href="http://evemaps.dotlan.net/system/{{ ops.system }}">{{ ops.system }}</a>
                	</td>
                	<td style="width:150px" class="text-center">{{ ops.location }}</td>
                	<td style="width:150px" class="text-center" nowrap>{{ ops.start | date:"Y-m-d H:i" }}</td>
                	<td class="text-center" nowrap><div id="localtime{{ ops.id }}"></div><div id="countdown{{ ops.id }}"></div></td>
		        <td style="width:150px" class="text-center">{{ ops.duration }}</td>
		        <td style="width:150px" class="text-center">{{ ops.fc }}</td>
                	<td style="width:150px" class="text-center">{{ ops.details }}</td>
                	<td style="width:150px" class="text-center">{{ ops.post_time}}</td>
                        {% if perms.auth.optimer_management %}
                            <td style="width:150px" class="text-center">{{ ops.eve_character }}</td>
                            <td class="text-center">
                                <a href="{% url 'auth_remove_optimer' ops.id %}" class="btn btn-danger">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </a>
                                <a href="{% url 'auth_edit_optimer' ops.id %}" class="btn btn-info">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </a>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tr>
        </table>
        {% else %}
        <br  /><div class="alert alert-warning text-center">No fleet operations found.</div>
        {% endif %}
    </div>

    {% include 'bundles/moment-js.html' with locale=True %}
    <script src="{% static 'js/timers.js' %}"></script>
    <script type="text/javascript">
        // Data
        var timers = [
        {% for op in optimer %}
            {
                'id': {{ op.id }},
                'start': moment("{{ op.start | date:"c" }}"),
                'expired': false
            },
        {% endfor %}
        ];
    </script>
    <script type="text/javascript">

        timedUpdate();
        setAllLocalTimes();

        // Start timed updates
        setInterval(timedUpdate, 1000);

        function timedUpdate() {
            updateClock();
            updateAllTimers();
        }

        function updateAllTimers () {
            var l = timers.length;
            for (var i=0; i < l; ++i) {
                if (timers[i].expired) continue;
                updateTimer(timers[i]);
            }
        }

        /**
         * Update a timer
         * @param timer Timer information
         * @param timer.start Date of the timer
         * @param timer.id Id number of the timer
         * @param timer.expired
         */
        function updateTimer(timer) {
            if (timer.start.isAfter(Date.now())) {
                var duration = moment.duration(timer.start - moment(), 'milliseconds');
                document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
            } else {
                timer.expired = true;
                document.getElementById("countdown" + timer.id).innerHTML = "";
            }
        }

        /**
         * Set all local time fields
         */
        function setAllLocalTimes() {
            var l = timers.length;
            for (var i=0; i < l; ++i) {
                setLocalTime(timers[i]);
            }
        }

        /**
         * Set the local time info for the timer
         * @param timer Timer information
         * @param timer.start Date of the timer
         * @param timer.id Id number of the timer
         */
        function setLocalTime(timer) {
            document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
        }

        function updateClock() {
            document.getElementById("current-time").innerHTML = "<b>" + moment.utc().format('LLLL') + "</b>";
        }
    </script>
{% endblock content %}