{% extends 'spectator_events/base.html' %}
{% load spectator_events static %}

{% block head_extra %}
  {% if SPECTATOR_MAPS and SPECTATOR_MAPS.enable %}
    {% if SPECTATOR_MAPS.library == "mapbox" %}
      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />
      <style>
        .spectator-marker {
          background-image: url("{% static "img/map-marker.png" %}");
          background-size: cover;
          width: 58px;
          height: 41px;
          cursor: pointer;
        }
      </style>
    {% endif %}

    <style type="text/css">
      .venue-map {
        max-width: 100%;
        height: 300px;
        border: 1px solid #eee;
        margin-bottom: 1em;
      }
    </style>
  {% endif %}
  {{ block.super }}
{% endblock %}

{% block head_page_title %}{{ venue.name }}{% if page_obj.number > 1 %} (page {{ page_obj.number }}){% endif %}{% endblock %}
{% block content_title %}{{ venue.name }}{% endblock %}

{% block breadcrumbs %}
  {{ block.super }}
  <li class="breadcrumb-item"><a href="{% url 'spectator:events:venue_list' %}">Venues</a></li>
  <li class="breadcrumb-item active">{{ venue.name }}</li>
{% endblock %}

{% block content %}

  <p class="lead">
    {{ venue.address }}{% if venue.address and venue.country_name %}, {% endif %}{% if venue.country_name %}{{ venue.country_name }}{% endif %}
  </p>

  {% with names=venue.previous_names %}
    {% if names|length > 0 %}
      <p>Previously visited as: {{ names|join:", " }}.</p>
    {% endif %}
  {% endwith %}

  {% if venue.note %}
    {{ venue.note|safe|linebreaks }}
  {% endif %}

  {% if venue.cinema_treasures_url %}
    <p><a href="{{ venue.cinema_treasures_url }}">See at Cinema Treasures.</a></p>
  {% endif %}

  {% if SPECTATOR_MAPS.enable %}
    <div class="js-venue-map-container"></div>
  {% endif %}

  {% if event_list|length > 0 %}
    <h2>{{ page_obj.paginator.count }} event{{ page_obj.paginator.count|pluralize }}</h2>
    {% include 'spectator_events/includes/events_paginated.html' with event_list=event_list page_obj=page_obj only %}
  {% else %}
    <p>There are no events to show.</p>
  {% endif %}

{% endblock content %}


{% block sidebar_nav %}
  {% load spectator_core %}
  {% change_object_link_card object perms %}

  {{ block.super }}
{% endblock sidebar_nav %}


{% block sidebar_content %}

  {% most_visited_venues_card num=10 %}

  {{ block.super }}
{% endblock sidebar_content %}


{% block foot_extra %}
  {% if SPECTATOR_MAPS and SPECTATOR_MAPS.enable %}

    {# Best way of putting the config dict into a JS variable. #}
    {{ SPECTATOR_MAPS|json_script:"spectator-maps-config" }}
    <script>
      var spectator_map_latitude = '{{ venue.latitude|escapejs }}';
      var spectator_map_longitude = '{{ venue.longitude|escapejs }}';
      var spectator_map_config = JSON.parse(
        document.getElementById("spectator-maps-config").textContent
      );
    </script>

    <script src="{% static "js/venue_map.js" %}"></script>

    {% if SPECTATOR_MAPS.library == "google" and SPECTATOR_MAPS.api_key %}
      <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ SPECTATOR_MAPS.api_key }}&callback=spectatorInitMap"></script>
    {% else %}

      {% if SPECTATOR_MAPS.library == "mapbox" %}
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
        <script>
          mapboxgl.accessToken = "{{ SPECTATOR_MAPS.api_key|escapejs }}";
        </script>
      {% endif %}

      <script>
        spectatorInitMap();
      </script>
    {% endif %}
  {% endif %}

  {{ block.super }}
{% endblock %}
