{% extends "structuretimers/base.html" %}
{% load static %}
{% load i18n %}

{% block details %}
    <div class="text-center">
        <b>{% translate "Current Eve Time:" %}</b>&nbsp;<span id="current-time">{{ current_time }}</span>
    </div>

    <span class="pull-right">
        {% if perms.structuretimers.create_timer %}
            <a
                href="{% url 'structuretimers:add' %}"
                class="btn btn-success btn-tabs"
                title="Add new timer">
                Add Timer
            </a>
        {% endif %}
    </span>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Current Timers</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Past Timers</a></li>
    </ul>

    <div class="panel panel-default panel-tabs">
        <div class="panel-body">
            <div class="tab-content">
                <!-- current structuretimers tab -->
                <div role="tabpanel" class="tab-pane active" id="home">
                    {% include 'structuretimers/timer_list_table.html' with tab_name='current' %}
                    <p class="text-muted">
                        Timers remain on this page for {{ max_hours_expired }} hours after they expired
                    </p>
                </div>

                <!-- past structuretimers tab -->
                <div role="tabpanel" class="tab-pane" id="profile">
                    {% include 'structuretimers/timer_list_table.html' with tab_name='past' %}
                </div>
            </div>
        </div>
    </div>

    <!-- modal to show timer details -->
    <div class="modal" id="modalTimerDetails" tabindex="-1" role="dialog" aria-labelledby="myModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Timer details</h4>
                </div>
                <div class="modal-body">
                    <div id="modal_div_spinner">
                        <img class="center-block img-rounded" src="{% static 'structuretimers/Spinner-1s-200px.gif' %}" alt="Spinner"/>
                    </div>
                    <div id="modal_div_data" style="display: none;">
                        <label for="timerboardTimer">Timer</label>
                        <p><span id="timerboardTimer"></span></p>
                        <label for="timerboardImgScreenshot">Image</label>
                        <a href="#" target="_blank">
                            <img id="timerboardImgScreenshot" class="img-responsive img-rounded" alt="details image" src=""/>
                        </a>
                        <br>
                        <label for="timerboardNotes">Notes</label>
                        <textarea id="timerboardNotes" class="form-control" rows="3" readonly></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- share data with JS part -->
    <div
        id="dataExport"
        data-listDataCurrentUrl="{% url 'structuretimers:timer_list_data' 'current' %}"
        data-listDataPastUrl="{% url 'structuretimers:timer_list_data' 'past' %}"
        data-getTimerDataUrl="{% url 'structuretimers:get_timer_data' 'pk_dummy' %}"
        data-titleSolarSystem="{% translate 'Solar System' %}"
        data-titleRegion="{% translate 'Region' %}"
        data-titleStructureType="{% translate 'Structure Type' %}"
        data-titleTimerType="{% translate 'Timer Type' %}"
        data-titleOwner="{% translate 'Owner' %}"
        data-titleObjective="{% translate 'Objective' %}"
        data-titleVisibility="{% translate 'Visibility' %}"
        data-hasPermOPSEC="{{ perms.structuretimers.opsec_access }}"
        data-dataTablesPageLength="{{ data_tables_page_length }}"
        data-dataTablesPaging="{{ data_tables_paging }}"
    >
    </div>
{% endblock details %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    <link rel="stylesheet" href="{% static 'structuretimers/global.css' %}" type="text/css" media="screen">
    <link rel="stylesheet" href="{% static 'structuretimers/timer_list.css' %}" type="text/css" media="screen">
{% endblock extra_css%}

{% block extra_javascript %}
    {% include 'bundles/moment-js.html' with locale=True %}
    {% include 'bundles/datatables-js.html' %}
    <script type="application/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
    <script type="application/javascript" src="{% static 'structuretimers/timer_list.js' %}"></script>
{% endblock extra_javascript %}
