{% load i18n %}
{% load humanize %}
{% load evelinks %}

<div>
    <h2><span id="title">{{ moon.name }}</span></h2>

    <br />

    <div class="col-md-12" id="content" >
        <div class="row">
            <div class="col-md-5">
                <div class="panel panel-info">
                    <div class="panel-heading">Resources</div>
                    <div class="panel-body">
                        {% for res in moon.resources.all|order_quantity %}
                            <img src="{{ res.ore.id|type_icon_url:32 }}" /> {{ res.ore.name }} <span class="label bg-R{{ res.rarity }}">R{{ res.rarity }}</span> <i style="font-size: 80% !important;">{{ resources|get_item:res.ore.id|floatformat:2|intcomma }} isk/m<sup>3</sup></i>
                            <div class="progress" style="margin-left: 0;">
                                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{ res.quantity|percent }}%;">
                                    <h5 class="media-heading percent">{{ res.quantity|percent }}% </h5>
                                </div>
                            </div>
                            <br />
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="panel panel-default">
                    <div class="panel-heading">Extractions</div>
                    <div class="panel-body">
                        <table class="table table-striped" id="pastTable">
                            <thead>
                                <th>Date</th>
                                <th>Jackpot?</th>
                            </thead>
                            <tbody>
                                {% for ext in moon.extractions.all.reverse%}
                                    <tr>
                                        <td>{{ ext.arrival_time|date:"Y-n-j h:i" }}</td>
                                        <td>
                                            {% if ext.jackpot %}
                                                <span class="fas fa-check"></span>
                                            {% else %}
                                                <span class="fas fa-times"></span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>