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

{% block content %}
    <div class="col-lg-12">
        <br>
        {% include 'moonstuff/moonmenu.html' %}
        <h2> {% trans "Moon Information" %} - {{ moon.name }} </h2>
        <div class="row">
            <div class="col-md-6  mr-md-1">
                <div class="panel panel-success">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title"> Moon Resource Information </h3>
                    </div>
                    <div class="panel-body">
                        {% if res|length_is:"0" %}
                            <div class="alert alert-warning">
                                <p> There are no resources recorded for {{ moon.name }}. {% if perms.moonstuff.add_moon %} Why not add a moon scan? {% endif %}</p>
                            </div>
                        {% else %}
                            {% for res in res %}
                                <ul class="media-list">
                                    <li class="media">
                                        <div class="media-left">
                                            <img class="media-object" src="{{ res.1 }}">
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">{{ res.0 }}</h4>
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="{{ res.2 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ res.2 }}%; line-height: 20px;">
                                                    <span class="sr-only">{{ res.2 }}% {{ res.0 }}</span>
                                                    <h5 class="media-heading" style="padding-top: 2px">{{ res.2 }}%</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            {% if not res|length_is:"0" and perms.add_resource %}
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Moon Value
                    </div>
                    <div class="panel-body">
                        <input id="days" data-slider-id='ex1Slider' type="range" data-slider-min="1" data-slider-max="30" data-slider-step="1" data-slider-value="30"/>
                        <br />
                        <span>Value for a <span id="daysVal">30</span> day pull: <strong><span id="pullVal">{{ value_per_month|floatformat:2|intcomma }}</span></strong></span>
                    </div>
                    <div class="panel-footer">
                        Note: Value calculated based on max refine in a T2 Athanor located in NullSec.
                    </div>
                </div>
            {% endif %}
            </div>
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title"> Next Pulls </h3>
                    </div>
                    <div class="panel-body">
                        <table class="table" style="text-align: center">
                            <thead>
                                <th style="text-align: center"> Date(EVE/UTC)</th>
                            </thead>
                            <tbody>
                                {% if pulls|length_is:"0" %}
                                    <tr>
                                        <td> No Pulls for this moon in the next month.</td>
                                    </tr>
                                {% else %}
                                    {% for pull in pulls %}
                                        <tr>
                                            <td>{{ pull.arrival_time }}</td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title"> Past Pulls</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table text-center" id="past-events">
                            <thead>
                                <th> Date (EVE/UTC) </th>
                            </thead>
                            <tbody>
                                {% if ppulls|length_is:"0" %}
                                    <tr>
                                        <td> No Past Pulls recorded for this moon.</td>
                                    </tr>
                                {% else %}
                                    {% for pull in ppulls %}
                                        <tr>
                                            <td>{{ pull.arrival_time }}</td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}
{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js" integrity="sha256-59/apVFrosMLFX2dHZLGvb3nPpu7e0Yx1rsDr1dTRrk=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
{% endblock %}
{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />
{% endblock %}
{% block extra_script %}
    $(document).ready(function(){
        $('#past-events').DataTable();
        $('#days').slider();
        $('#days').on("slide", function(slideEvt){$('#daysVal').text(slideEvt.value); $('#pullVal').text(numeral(slideEvt.value * {{ value_per_day }}).format('0,0.00'));});
    });
{% endblock %}