{% extends "oscar/layout.html" %}
{% load i18n %}
{% load staticfiles %}
{% load thumbnail %}
{% load currency_filters %}

{% block extrahead %}
<style>map img { max-width: none; }</style>
{% endblock %}

{% block content %}
    <div class="container-fluid page">
        <div class="page_inner">
            <section class="stores-list">
                <h1 class="hidden-phone">{% trans "View our stores" %}</h1>
                <div class='row-fluid'>
                    <map class='span12'>
                        <div class='store-map' style="width: 880px; height: 380px;"></div>
                    </map>
    	        </div>

                {% for store in store_list %}
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="sub-header">
                                <h4>{{ store.name }}
                                <a href="{% url stores:detail store.slug %}" 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 %}
                            <div>
                                <img src="{{ im.url }}" />
                            </div>
                            {% endthumbnail %}
                        </div>

                        <div class="span4">
                            {% 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>
                {% endfor %}
            </section>
        </div>
    </div>
{% endblock %}

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

{% block onbodyload %}
    stores.maps.createOverviewMap();
{% endblock %}