{% extends "base.html" %}
{% load static %}
{% block title %}{{ product.name }} · {{ SITE_NAME }}{% endblock %}
{% block meta_description %}{{ product.name }} — {{ product.price }} {{ product.currency|upper }} at {{ SITE_NAME }}.{% endblock %}
{% block extra_head %}
  {% include "shop/_stl_importmap.html" %}
{% endblock %}
{% block content %}
  {% include "public/_breadcrumbs.html" with title=product.name %}
  <section class="section section-lg bg-default">
    <div class="container">
      <div class="row row-30">
        <div class="col-lg-6">
          <div class="product-gallery" data-product-gallery>
            {{ gallery_data|json_script:"product-gallery-data" }}
            <div class="product-gallery-layout">
              <div class="product-gallery-thumbs" data-gallery-thumbs role="tablist" aria-label="Product media">
                {% for item in gallery_items %}
                <button type="button" class="{% if forloop.first %}active{% endif %}" role="tab" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" data-gallery-thumb data-kind="{{ item.kind }}" {% if item.kind == 'photo' %}data-url="{{ item.url }}"{% endif %}>
                  {% if item.kind == 'photo' %}
                  <img src="{{ item.url }}" alt="">
                  {% else %}
                  <span class="product-gallery-thumb-3d">3D</span>
                  {% endif %}
                </button>
                {% endfor %}
              </div>
              <div class="product-gallery-stage">
                <div class="slick-product-figure product-gallery-photo" data-gallery-photo {% if gallery_items.0.kind == 'model' %}hidden{% endif %}>
                  {% if gallery_photos %}
                  <img data-gallery-image src="{{ gallery_photos.0.url }}" alt="{{ product.name }}" width="530" height="480"/>
                  {% elif product.image_id %}
                  <img data-gallery-image src="{{ product.image_url }}" alt="{{ product.name }}" width="530" height="480"/>
                  {% else %}
                  <img data-gallery-image src="{% static 'images/single-product-1-530x480.png' %}" alt="{{ product.name }}" width="530" height="480" data-placeholder="{% static 'images/single-product-1-530x480.png' %}"/>
                  {% endif %}
                </div>
                {% if product.stl_id %}
                <div class="slick-product-figure product-gallery-model" data-gallery-model {% if gallery_items.0.kind != 'model' %}hidden{% endif %}>
                  <div class="stl-viewer"
                    data-stl-viewer
                    data-src="{{ product.stl_url }}"
                    data-color="{{ selected_color.hex|default:'#00aeef' }}"
                    data-label="3D model of {{ product.name }}. Drag to rotate, scroll to zoom."></div>
                  <p class="product-media-hint">Drag to spin · scroll to zoom</p>
                </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="single-product">
            <h3 class="single-product-title">{{ product.name }}</h3>
            <div class="group-md group-inline">
              <div class="heading-5 single-product-price">${{ product.price }}</div>
            </div>
            <div>{{ product.description|linebreaks }}</div>
            <hr class="hr-24 hr-gray-100">
            <ul class="list-description">
              <li><span>SKU:</span><span>{{ product.sku }}</span></li>
              <li><span>Fulfillment:</span><span>{{ product.get_fulfillment_display }}</span></li>
              <li data-availability-row {% if available is None %}hidden{% endif %}><span>Availability:</span><span data-availability>{% if available is not None %}{{ available }} in stock{% endif %}</span></li>
              {% if product.print_minutes %}
              <li><span>Print time:</span><span>{{ product.print_minutes }} min</span></li>
              {% endif %}
            </ul>
            <form method="post" action="{% url 'shop:cart_add' product.slug %}">
              {% csrf_token %}
              {% if colors %}
              <div class="product-color-picker">
                <p class="product-color-label">Color: <span id="selected-color-name">{{ selected_color.name }}</span></p>
                <div class="product-color-swatches">
                  {% for color in colors %}
                  <label class="product-color-swatch">
                    <input type="radio" name="color" value="{{ color.pk }}" data-color-name="{{ color.name }}" data-color-hex="{{ color.hex }}" {% if forloop.first %}checked{% endif %} required>
                    <span style="background:{{ color.hex }}" title="{{ color.name }}"></span>
                  </label>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
              <div class="group-md group-middle">
                <div class="stepper-style-1">
                  <input type="number" name="quantity" value="1" min="1" max="1000">
                </div>
                <div>
                  <button class="button button-lg button-primary" type="submit">Add to cart</button>
                </div>
              </div>
            </form>
            <hr class="hr-30 hr-gray-100">
            <p><a href="{% url 'shop:list' %}">← Back to shop</a></p>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}
{% block extra_js %}
<script type="module" src="{% static 'js/stl-viewer.js' %}"></script>
{% endblock %}