{% extends "oscar/layout.html" %}
{% load i18n %}
{% load image_tags %}

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

{% block title %}
    {{ store.name }} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{% url 'home' %}">{% trans "Home" %}</a>
        </li>
        <li>
            <a href="{% url 'stores:index' %}">{% trans "Stores" %}</a>
        </li>
        <li class="active">{{ store.name }}</li>
        <span class="pull-right"><a href="{% url 'stores:index' %}"><i class="icon-arrow-left"></i> {% trans "View all stores" %}</a></span>
    </ul>
{% endblock %}

{% block headertext %}{{ store.name }}{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-4 store-address-contact">
            <div class="store-details">
                {% if store.image %}
                    {% oscar_thumbnail store.image "300x300" as im %}
                    <img alt="{{ store.name }}" src="{{ im.url }}" width="{{ im.width}}" height="{{ im.height }}" class="img-responsive">
                {% endif %}

                {% include "stores/partials/store_address.html" %}
                {% include "stores/partials/store_contact.html" %}
            </div>

            <h3>{% trans "Opening hours" %}</h3>
            {% include "stores/partials/store_opening_periods.html" %}

        </div>
        <div class="col-md-8">
            <section class="row">
                <map>
                    <div class="store-map" style="width: 720px; height:450px;"></div>
                </map>
                {{ store.description|safe }}
            </section>
        </div>
    </div>
{% endblock %}

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

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