{% extends "public/base.html" %}
{% load bootstrap %}
{% load staticfiles %}
{% load i18n %}

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

{% block content %}
<div class="col-lg-12">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">{% trans "Toggle navigation" %}</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">{% trans "Fleet-Up" %}</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">{% trans "Ops and Timers" %} <span class="sr-only">(current)</span></a></li>
                <li><a href="{% url 'auth_fleetup_doctrines' %}">{% trans "Doctrines" %}</a></li>
                <li><a href="{% url 'auth_fleetup_fittings' %}">{% trans "Fittings" %}</a></li>
                {% if perms.auth.human_resources %}
                <li><a href="{% url 'auth_fleetup_characters' %}">{% trans "Characters" %}</a></li>
                {% endif %}
                <li></li>
            </ul>
        </div>
    </div>
</nav>
<div class="panel">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#operations">{% trans "Operations" %}</a></li>
        <li><a data-toggle="tab" href="#timers">{% trans "Timers" %}</a></li>
    </ul>

    <div class="tab-content">
        <div id="operations" class="tab-pane fade in active">
            <div class="col-lg-7">
                {% if operations_list %}
                {% for subject, start in operations_list %}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><b>{{ start.subject }}</b></h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-condensed">
                                <tr>
                                    <th class="col-md-6">{% trans "Start" %}</th>
                                    <th class="col-md-6">{% trans "End" %}</th>
                                </tr>
                                <tr>
                                    <td class="col-md-6">{{ start.start|date:"l d M H:i" }} <span class="label label-success">{% trans "Eve Time" %}</span></td>
                                    
                                    <td class="col-md-6">{{ start.end|date:"l d M H:i" }} <span class="label label-success">{% trans "Eve Time" %}</span></td>
                                </tr>
                                <tr>
                                    <td class="col-md-6">
                                        <span id="localtime{{ start.operation_id }}"></span>&nbsp;<span class='label label-success'>Local time</span><br>
                                        <div id="countdown{{ start.operation_id }}"></div>
                                    </td>
                                    
                                    <td class="col-md-6"></td>
                                </tr>
                            </table> 
                            <p>{{ start.details }}</p>
                            
                            <div class="col-lg-12">
                            <table class="table table-condensed table-striped">
                                <tr>
                                    <th class="col-md-4">{% trans "Location" %}</th>
                                    <th class="col-md-4">{% trans "Doctrine" %}</th>
                                    <th class="col-md-2">{% trans "Organizer" %}</th>
                                    <th class="col-md-2">{% trans "URL" %}</th>
                                </tr>
                                <tr>
                                    <td>
                                        {{ start.location }} - {{ start.location_info }} <a href="http://evemaps.dotlan.net/system/{{ start.location }}" target="_blank" class="label label-success">Dotlan</a>
                                    </td>
                                    <td>
                                        {% if start.doctrine %}
                                        {% for doctrine in start.doctrine %}
                                            
                                            <a href="{% url 'auth_fleetup_doctrine' doctrine.Id %}" class="label label-success">{{ doctrine.Name }}</a>
                                            
                                        {% endfor %}
                                            
                                        {% else %}
                                        <span class="label label-danger">{% trans "TBA" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {{ start.organizer }}
                                    </td>
                                    <td>
                                        {% ifequal start.url "" %}
                                        <div class="label label-danger">{% trans "No link" %}</div>
                                        {% else %}
                                        <a href="{{ start.url }}" target="_blank" class="label label-success">{% trans "External link" %}</a>
                                        {% endifequal %}
                                    </td>
                                </tr>
                            </table>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                {% else %}
            <h3>{% trans "There seems to be no Operations in the near future, go make ISK!" %}</h3>
            {% endif %}
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">{% trans "Current Eve Time:" %}</h2>
                    </div>
                    <div class="panel-body">
                        <div id="current-time"></div>
                    </div>
                </div>
                {% if timers_list %}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">{% trans "Timers" %}</h2>
                    </div>
                    <div class="panel-body">
                        <table class="table table-condensed table-hover table-striped">
                        {% for notes, type in timers_list %}
                        <tr>
                        <td>
                            {{ type.solarsystem }}
                        </td>
                            <td>
                            {{ type.expires|date:"l d M H:i" }}
                            </td>
                        </tr>
                        {% endfor %}
                        </table>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        <div id="timers" class="tab-pane fade in">
            <div class="col-lg-12">
                {% if timers_list %}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">{% trans "Timers" %}</h2>
                    </div>
                    <div class="panel-body">
                        <div class="col-lg-12">
                        <table class="table table-condensed table-hover table-striped">
                        <tr>
                            <th class="col-lg-1">{% trans "Type" %}</th>
                            <th class="col-lg-1">{% trans "Structure" %}</th>
                            <th class="col-lg-2">{% trans "Location" %}</th>
                            <th class="col-lg-2">{% trans "Expires(EVE-time)" %}</th>
                            <th class="col-lg-1">{% trans "Owner" %}</th>
                            <th class="col-lg-2">{% trans "Note" %}</th>
                        </tr>
                        {% for notes, type in timers_list %}
                        <tr>
                        <td>
                            {% ifequal type.type "Final" %}
                                        <span class="label label-danger">
                            {{ type.type }}</span>{% else %}{{ type.type }}{% endifequal %}
                        </td>
                        <td>
                            {{ type.timer_type }}
                        </td>
                        <td>
                            {{ type.solarsystem }} - Planet:{{ type.planet }} Moon:{{ type.moon }}
                        </td>
                        <td>
                            {{ type.expires|date:"l d M H:i" }}
                        </td>
                        <td>
                            {{ type.owner }}
                        </td>
                        <td>            
                            {{ type.notes }}
                        </td>
                        </tr>
                        {% endfor %}
                        </table>
                        </div>
                    </div>
                </div>
                {% else %}
            <h3>{% trans "There seems to be no Timers in the near future, this does not mean there isn't any!" %}</h3>
            {% endif %}
            </div>
        </div>
    </div>

</div>
</div>
{% include 'bundles/moment-js.html' with locale=True %}
<script src="{% static 'js/timers.js' %}"></script>
<script type="text/javascript">
    // Data
    var timers = [
    {% for start, op in operations_list %}
        {
            'id': {{ op.operation_id }},
            'start': moment("{{ op.start | date:"c" }}"),
            'end': moment("{{ op.end | 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('ddd, ll HH:mm:ss z') + "</b>";
    }
</script>
{% endblock content %}