{% extends "layout.html" %}
{% load url from future %}
{% load i18n %}
{% load staticfiles %}
{% load thumbnail %}
{% load currency_filters %}

{% block extrahead %}
    <style>map img { max-width: none; }</style>
    <link rel="stylesheet" href="{{ STATIC_URL }}stores/css/stores.css" />
{% endblock %}

{% block title %}
{{ queryset_description }} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
<ul class="breadcrumb">
    <li>
        <a href="{% url 'promotions:home' %}">{% trans "Home" %}</a>
        <span class="divider">/</span>
    </li>
    <li>
        <a href="{% url 'stores:index' %}">{% trans "Stores" %}</a>
        <span class="divider">/</span>
    </li>
    <li class="active">{{ queryset_description }}</li>
</ul>
{% endblock %}

{% block headertext %}
{{ queryset_description }}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row-fluid">
        {% if all_stores %}
        <div class="span3 view-stores">
            <form id="store-search" action="." method="get">
                <button type="button" class="btn btn-primary location" data-behaviours="geo-location"><i class="icon-screenshot"></i>{% trans "Use my location" %}</button>
                <header class="divide-header">
                    <em>-</em> <span>{% trans "or" %}</span> <em>-</em>
                </header>

                {{ form.non_field_errors }}

                {# Hidden fields that are manipulated by JS #}
                {{ form.latitude }}
                {{ form.longitude }}

                <div class="stores-postcode-search">
                    {{ form.query }}
                    <button type="submit" class="icon-search"></button>
                </div>

                {% if form.group.field.choices %}
                    <h3>{% trans "Filter by group" %}</h3>
                    {{ form.group }}
                {% endif %}
            </form>

                <h3>All stores</h3>
                <ul class="nav nav-tabs nav-stacked">
                {% for store in all_stores %}
                <li>
                    <a href="{% url 'stores:detail' store.slug store.pk %}">
                        {{ store.name }}
                    </a>
                </li>
                {% endfor %}
                </ul>
        </div>

        <div class="span9">
            {% if store_list %}
                <div class='row-fluid'>
                    <map class='span12'>
                        <div id='store-map' style="width: 100%; height: 380px;"></div>
                    </map>
                </div>

                {% for store in store_list %}
                <div class="stores-list">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="sub-header">
                                <h4>{{ store.name }}
                                {% if store.distance %}
                                    <span class="distance">{{ store.distance.km|floatformat:2 }} km</span>
                                {% endif %}
                                <a href="{% url 'stores:detail' store.slug store.pk %}" class="btn pull-right">{% trans "View store details" %}</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            {% thumbnail store.image "400x400" as im %}
                            <a href="{{ store.get_absolute_url }}"><img alt="{{ store.name }}" src="{{ im.url }}" width="{{ im.width}}" height="{{ im.height }}" /></a>
                            {% endthumbnail %}
                        </div>

                        <div class="span4 store-address-contact">
                            {% include "stores/partials/store_address.html" %}
                            {% include "stores/partials/store_contact.html" %}
                            <br/>
                        </div>

                        <div class="span4">
                            {% include "stores/partials/store_opening_periods.html" %}
                        </div>

                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p>{% trans "No stores found in the area." %}</p>
            {% endif %}
        </section>
        {% else %}
        <p>{% trans "No store data available." %}</p>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block extrascripts %}
    {{ block.super }}
    {% include "stores/partials/extrascripts.html" %}
{% endblock %}

{% block onbodyload %}
    {% if store_list %}
        var storeData = [
            {% for store in store_list %}
            {
                'name': '{{ store.name|escapejs }}',
                'location': new google.maps.LatLng({{ store.location.y }}, {{ store.location.x }}),
                'imageURL': '{% if store.image %}{{ store.image.url }}{% endif %}',
                'address1': '{{ store.address.line1|escapejs }}',
                'address2': '{{ store.address.line2|escapejs }}',
                'address3': '{{ store.address.line3|escapejs }}',
                'address4': '{{ store.address.line4|escapejs }}',
                'postcode': '{{ store.address.postcode|escapejs }}',
                'url': '{{ store.get_absolute_url|escapejs }}',
                'email': '{{ store.email|escapejs }}',
                'phone': '{% if store.phone %}{{ store.phone|escapejs }}{% endif %}',
                'group': '{{ store.group.name|upper }}'
            } {% if forloop.counter < store_list|length %},{% endif %}
            {% endfor %}
        ];
        {% if longitude and latitude %}
            var pnt = new google.maps.LatLng({{ latitude}}, {{ longitude }});
        {% else %}
            var pnt = null;
        {% endif %}
        stores.maps.overview.init(storeData, pnt);
    {% endif %}
{% endblock %}