{% extends "oscar/catalogue/detail.html" %}

{% load history_tags currency_filters reviews_tags staticfiles product_tags display_tags i18n purchase_info_tags ocyanjson wagtailcore_tags %}

{% block header %}
{% endblock header %}

{% block content %}

<article class="product_page">

    <section>
        <div class="row">

            {% block product_gallery %}
            <div class="col-sm-6">
                {% include "catalogue/partials/gallery.html" %}
            </div>
            {% endblock %}

            {% block product_main %}
            <div class="col-sm-6 product_main">
                {% comment %}
                This is a but clunky here.  Better to have some kind of JS-driven dashboard menu that
                pops out when clicked.  A bit like the Django-Debug-Toolbar button
                {% endcomment %}
                {% if user.is_staff %}
                    <a class="pull-right hidden-xs" href="{% url 'dashboard:catalogue-product' pk=product.id %}"><small><i class="icon-edit"></i> {% trans "Edit this product" %}</small></a>
                {% endif %}
                <h1 class="product-title">{{ product.get_title }}</h1>

                {% purchase_info_for_product request product as session %}
                <p>{{ session.availability.message }}</p>

                {% iffeature "reviews" %}
                    {% include "catalogue/reviews/partials/review_stars.html" %}
                {% endiffeature %}

                {% block product_stock_record %}
                    {% include "catalogue/partials/stock_record.html" with verbose=1 %}
                {% endblock %}

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

                <hr>

                {% block product_description %}
                    {% if product.description %}
                    <p>{{ product.description|safe }}</p>
                    {% endif %}
                {% endblock %}
            </div><!-- /col-sm-6 -->
            {% endblock %}

        </div><!-- /row -->
    </section>



    {% block product_info %}

    <section>
        {% ocyanjson "oscar" "enable_long_description" False as enable_long_description %}
        <ul class="nav nav-tabs">
          {% if enable_long_description and product.long_description %}
          <li class="active"><a data-toggle="tab" href="#long_description"><h2>{% trans "Description" %}</h2></a></li>
          {% endif %}
          <li {% if not enable_long_description or not product.long_description %}class="active"{% endif %}><a data-toggle="tab" href="#product"><h2>{% trans "Product Information" %}</h2></a></li>
          {% iffeature "reviews" %}
          <li><a data-toggle="tab" href="#addreview"> <h2>{% trans "Customer Reviews" %}</h2></a></li>
          {% endiffeature %}
        </ul>

        <div class="tab-content">
          {% if enable_long_description and product.long_description %}
          <div id="long_description" class="tab-pane fade in active">
            {{ product.long_description|richtext}}
          </div>
          {% endif %}
          <div id="product" class="tab-pane fade in {% if not enable_long_description or not product.long_description %}active{% endif %}">
              <table class="table table-striped">
                  {% if product.upc %}
                  <tr>
                      <th>{% trans "UPC" %}</th><td>{{ product.upc }}</td>
                  </tr>
                  {% endif %}
                  <tr>
                      <th>{% trans "Product Type" %}</th><td>{{ product.get_product_class.name }}</td>
                  </tr>

                  {% purchase_info_for_product request product as session %}
                  {% if session.price.exists %}
                      <tr>
                          <th>{% trans "Price (excl. tax)" %}</th><td>{{ session.price.excl_tax|currency:session.price.currency }}</td>
                      </tr>
                      {% if session.price.is_tax_known %}
                          <tr>
                              <th>{% trans "Price (incl. tax)" %}</th><td>{{ session.price.incl_tax|currency:session.price.currency }}</td>
                          </tr>
                          <tr>
                              <th>{% trans "Tax" %} {% trans product.vat_rate %} ({% widthratio product.tax_percentage 1 100 %}%)</th><td>{{ session.price.tax|currency:session.price.currency }}</td>
                          </tr>
                      {% endif %}
                      <tr>
                          <th>{% trans "Availability" %}</th>
                          <td>{{ session.availability.message }}</td>
                      </tr>
                  {% endif %}
                  {% for av in product.attribute_values.all %}
                      <tr>
                          <th>{{ av.attribute.name }}</th>
                          <td>{{ av.value_as_html }}</td>
                      </tr>
                  {% endfor %}
                  {% iffeature "reviews" %}
                      <tr>
                          <th>{% trans "Number of reviews" %}</th>
                          <td>{{ product.num_approved_reviews }}</td>
                      </tr>
                  {% endiffeature %}
              </table>
              {% endblock %}
          </div>
          <div id="addreview" class="tab-pane fade">
              {% iffeature "reviews" %}
                  {% block product_review %}
                      <div id="reviews">
                          {% if product.num_approved_reviews > 3 %}
                              <a href="{% url 'catalogue:reviews-list' product_slug=product.slug product_pk=product.id %}" class="btn pull-right">{% trans "See all reviews" %}</a>
                          {% endif %}
                      </div>

                      {% if product.num_approved_reviews == 0 %}
                          <p>
                              {% if product|is_review_permitted:user %}
                                  {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
                                      {% blocktrans %}This product does not have any reviews yet -
                                      <a href="{{ add_review_url }}#addreview">be the first to write one</a>.
                                  {% endblocktrans %}
                              {% else %}
                                  {% trans "This product does not have any reviews yet" %}.
                              {% endif %}
                          </p>
                      {% else %}
                          <ol class="list-unstyled review-list">
                              {% for review in product.reviews.approved.all|slice:":3" %}
                                  <li>
                                  {% include 'catalogue/partials/review.html' %}
                                  </li>
                              {% endfor %}
                          </ol>
                      {% endif %}
                  {% endblock product_review %}
              {% endiffeature %}
          </div>
        </div>
    </section>

    <section>
    {% block recommended %}
      {{block.super}}
    {% endblock recommended %}
    </section>

    <section>

        {% recently_viewed_products current_product=product %}
    </section>


</article><!-- End of product page -->
{% endblock content %}

{% block extrascripts %}
    {{ block.super }}
    <script type="text/javascript">
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }

    // Change hash for page-reload
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    })
    </script>
{% endblock %}