{% extends "allianceauth/base.html" %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% block page_title %}{% translate "Market Browser" %}{% endblock page_title %}

{% block content %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{% translate "Market Watches" %}</h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover" id="table-market-watches">
            <thead>
                <tr>
                    <th class="text-left">{% translate "EVE Type" %}</th>
                    <th class="text-left">{% translate "Missing Quantity" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for watchconfig in watchconfigs %}
                <tr>
                    <td>{{ watchconfig.eve_type.name }}</td>
                    <td>{{ watchconfig.missing_volume }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock content %}

{% block extra_javascript %}
    {% include "bundles/datatables-js.html" %}
    {% include "bundles/jquery-ui-js.html" %}
    {% include "bundles/moment-js.html" %}
    {% include "bundles/jquery-ui-css.html" %}
{% endblock extra_javascript %}

{% block extra_css %}
    {% include "bundles/datatables-css.html" %}
    {% include "bundles/jquery-ui-css.html" %}
    <link rel="stylesheet" type="text/css" href="{% static 'marketmanager/css/marketmanager.css' %}">
{% endblock extra_css %}

{% block extra_script %}
    $(document).ready( function () {
        $('#table-market-watches').DataTable({
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, 'All'],
            ],
            "stateSave": true,
            "stateDuration": 0
        });
    } );
{% endblock extra_script %}
