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

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

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

{% block breadcrumbs %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{% url 'home' %}">{% trans "Home" %}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{% url 'stores:index' %}">{% trans "Stores" %}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ store.name }}</li>
    </ol>
</nav>
{% endblock %}

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

{% block content %}
    <div class="row">
        <div class="col-md-4">
            <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-fluid mb-3">
                {% 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 %}