{% extends "base.html" %}

{% block meta %}
    <meta property="og:title" content="Scan{% if solarSystem %} of {{solarSystem}} at {%else%} taken at {%endif%}{{created|date:"H:i:s"}}" />
    <meta property="og:url" content="{{request.get_full_path}}" />
    <meta property="og:description" 
      content="{{summaryText}}" />
    <meta property="og:site_name" content="Directional Scan" />
{% endblock meta %}

{% block title %}
    D-Scan {{token}}
{% endblock title %}

{% block content %}
    <div class="container">
        <div class="card">
            <div class="navbar navbar-inverse">
                <span> 
                    <a href="/"><strong>>>New Scan<<</strong></a> Directional Scan
                    <small>[{{token}}] / Created {{created|date:"M d, Y - H:i:s"}} ({{ created|timesince }} ago)</small>
                </span>
                <span>
                    Solar System: 
                    {% if solarSystem %}
                        {{solarSystem}} 
                        <a target="_blank" href="https://evemaps.dotlan.net/system/{{solarSystem}}/" class="external-icon dotlan"></a> 
                        <a target="_blank" href="https://zkillboard.com/system/{{solarSystem}}/" class="external-icon zkb"></a>
                    {%else%}
                        Unknown
                    {%endif%}
                </span>
            </div>
            <div class="container-fluid" style="padding: 0">
                {% for category, ships, groups in data %}
                <div class="row no-gutters">
                    <div class="darkbox box-shadow result-container col-lg-8">
                        <div class="navbar table-header">
                            {{category}} <small>({{ships.1}} total)</small>
                        </div>
                        <table class="dscan-table table table-dark table-sm">
                            {% for ship in ships.0 %}
                            <tr class="ship" data-group="{{ship.group}}">
                                <td class="number">{{ship.count}}</td><td class="name">{{ship.name}}</td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <div class="darkbox box-shadow result-container col-lg-4">
                        <div class="navbar table-header">
                            &nbsp;
                        </div>
                        <table class="dscan-table table table-dark table-sm">
                            {% for group in groups %}
                                <tr class="group" data-group="{{group.id}}">
                                    <td class="number">{{group.count}}</td><td class="name">{{group.name}}</td>
                                </tr>
                            {% endfor %}        
                        </table>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock content %}


{% block scripts %}

<script>
    $('tr.ship').hover(function () {
        let group = $(this).data('group');
        $('.group[data-group='+group+']').addClass('hover')
    }, function () {
        let group = $(this).data('group');
        $('.group[data-group='+group+']').removeClass('hover')
    })

    $('tr.group').hover(function () {
        let group = $(this).data('group');
        $('.ship[data-group='+group+']').addClass('hover')
    }, function () {
        let group = $(this).data('group');
        $('.ship[data-group='+group+']').removeClass('hover')
    })
</script>

{% endblock scripts %}