{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% block page_title %}{% trans 'Moon Utilities' %}{% endblock %}

{% block content %}
    <div class="col-lg-12">
        <br>
        {% include 'moonstuff/moonmenu.html' %}
        <ul class="nav nav-pills">
            <li class="active"><a data-toggle="tab" href="#upcoming"> Upcoming Extractions</a></li>
            <li><a data-toggle="tab" href="#recent"> Recent Extractions</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active panel-default" id="upcoming">
                <div class="panel-body">
                    <h2> {% trans "Upcoming Extractions" %} </h2>
                    <p class="lead">All times displayed are EVE/UTC</p>
                    {% if exts|length_is:"0" %}
                        <div class="alert alert-warning" role="alert">
                            <p> There are no extractions happening in the next 7 days.</p>
                        </div>
                    {% else %}
                    <table class="table table-striped" id="table_upcoming">
                        <thead>
                            <th>Moon</th>
                            <th>Arrival Time</th>
                            <th></th>
                        </thead>
                        <tbody>
                            {% for event in exts %}
                                <tr>
                                    <td>{{ event.moon.name }}</td>
                                    <td>{{ event.arrival_time }}</td>
                                    <td><a class="btn btn-primary btn-sm" href="{% url 'moonstuff:moon_info' event.moon.moon_id %}"><span class="fa fa-eye fa-fw"></span></a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>
            <div class="tab-pane fade active panel-default" id="recent">
                <div class="panel-body">
                    <h2> {% trans "Recent Extractions" %} </h2>
                    <p class="lead">All times displayed are EVE/UTC</p>
                    {% if r_exts|length_is:"0" %}
                        <div class="alert alert-warning" role="alert">
                            <p> There are no extractions happening in the next 7 days.</p>
                        </div>
                    {% else %}
                    <table class="table table-striped" id="table_recent">
                        <thead>
                            <th>Moon</th>
                            <th>Arrival Time</th>
                            <th></th>
                        </thead>
                        <tbody>
                            {% for event in r_exts %}
                                <tr>
                                    <td>{{ event.moon.name }}</td>
                                    <td>{{ event.arrival_time }}</td>
                                    <td><a class="btn btn-primary btn-sm" href="{% url 'moonstuff:moon_info' event.moon.moon_id %}"><span class="fa fa-eye fa-fw"></span></a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
{% endblock %}
{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
{% endblock %}
{% block extra_script %}
    $(document).ready(function(){
        $('#table_recent').DataTable();
        $('#table_upcoming').DataTable();
    });
{% endblock %}