{% extends 'base.html' %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
<script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
{% endblock %}

{% block app_content %}
<h1>{{ game.name }}: {{ current_user.name }}</h1>
{% include '_game_player_info.html' %}
<h2>Bunnies:</h2>
<a href="{{ url_for('main.catch_bunny', game_name=game.name) }}">
    <button class="btn btn-success">Catch Bunny</button>
</a>
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Player Name</th>
                <th scope="col">Times Caught</th>
                <th scope="col">Last location</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for player in game.bunnies() %}
            <tr>
                <td>{{ player.user.name }}</td>
                <td>{{ player.caught_by_players | selectattr('catching_player', '==', current_user.player_in(game)) |list|length}}</td>
                <td>{% with location = player.user.last_location(game) %}
                        {% if location %}{{ moment(location.timestamp).fromNow()}}: {% endif %}
                        {{ location }}
                {% endwith %}</td>
                <td>
                    <a href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=player.name) }}">
                        <button class="btn btn-success">Catch</button>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>

{% endblock %}

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
    // Leaflet Map
    var map = L.map( 'map', {
        center: [52.2, 5.3],
        minZoom: 6,
        maxZoom: 19,
        bounds: [[50.5, 3.25], [54, 7.6]],
        zoom: 8
    });
    L.control.scale().addTo(map);

    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
    }).addTo( map );

    var greenIcon = new L.Icon({
        iconUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-icon-2x-green.png') }}",
        shadowUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-shadow.png') }}",
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    
    var players = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}')
    for (var i = 0; i < players.length; i++){
        var playerMarker = L.marker([
            players[i]['latitude'],
            players[i]['longitude']
        ], {icon: greenIcon}).addTo(map);
        var timestamp_utc = moment.utc(players[i]['timestamp_utc']).toDate()
        var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
        playerMarker.bindTooltip(`<b>${players[i]['username']}</b><br>
                                    ${timestamp_local}`).openPopup();
    }

</script>
{% endblock %}