<div class="row mb-3">

  {% if thumb or images %}
    <div class="col-sm">
      <div class="image magnific-popup">
        {% if thumb %}
          <a href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-thumbnail mb-3"/></a>
        {% endif %}

        {% if images %}
          <div>
            {% for image in images %}
              <a href="{{ image.popup }}" title="{{ heading_title }}"><img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-thumbnail" style="width: 74px"/></a>&nbsp;
            {% endfor %}
          </div>
        {% endif %}

      </div>
    </div>
  {% endif %}

  <div class="col-sm">
    <h1>{{ heading_title }}</h1>

    <ul class="list-unstyled mb-1">
      {% if manufacturer %}
        <li>{{ text_manufacturer }}: <strong><a href="{{ manufacturers }}">{{ manufacturer }}</a></strong></li>
      {% endif %}

      <li>{{ text_model }}: <strong>{{ model }}</strong></li>
      {% for product_code in product_codes %}
        <li>{{ product_code.code }}: <strong>{{ product_code.value }}</strong></li>
      {% endfor %}

      {% if reward %}
        <li>{{ text_reward }}: <strong>{{ reward }}</strong></li>
      {% endif %}

      <li>{{ text_stock }}: <strong><span class="text-{% if stock %}success{% else %}danger{% endif %}">{{ stock_status }}</span></strong></li>
    </ul>

    {% if review_status %}
      <div class="rating">
        {% for i in 1..5 %}
          {% if rating < i %}
            <span class="fa-stack"><i class="fa-regular fa-star fa-stack-1x"></i></span>
          {% else %}
            <span class="fa-stack"><i class="fa-solid fa-star fa-stack-1x"></i><i class="fa-regular fa-star fa-stack-1x"></i></span>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}

    {% if price %}
      <ul class="list-unstyled">
        {% if not special %}
          <li><h2><span class="price-new"><x-currency code="{{ currency }}" amount="{{ price }}"></x-currency></span></h2></li>
        {% else %}
          <li><span class="price-old"><x-currency code="{{ currency }}" amount="{{ price }}"></x-currency></span></li>
          <li><h2><span class="price-new"><x-currency code="{{ currency }}" amount="{{ special }}"></x-currency></span></h2></li>
        {% endif %}

        {% if tax %}
          <li>{{ text_tax }} <x-currency code="{{ currency }}" amount="{{ tax }}"></x-currency></li>
        {% endif %}

        {% if points %}
          <li>{{ text_points }} {{ points }}</li>
        {% endif %}

        {% if discounts %}
          <li>
            <hr>
          </li>

          {% for discount in discounts %}
            <li>{{ discount.quantity }}{{ text_discount }} <x-currency code="{{ currency }}" amount="{{ discount.price }}"></x-currency></li>
          {% endfor %}

        {% endif %}
      </ul>
    {% endif %}

    <form>
      <div class="btn-group">
        <button type="submit" formaction="{{ wishlist_add }}" class="btn btn-light btn-lg" title="{{ button_wishlist }}"><i class="fa-solid fa-heart"></i></button>
        <button type="submit" formaction="{{ compare_add }}" class="btn btn-light btn-lg" title="{{ button_compare }}"><i class="fa-solid fa-arrow-right-arrow-left"></i></button>
      </div>
      <input type="hidden" name="product_id" value="{{ product_id }}"/>
    </form>

    <br/>
    <div id="product">
      <form id="form-product" data-on="submit:onSubmit">
        {% if options %}
          <hr>
          <h3>{{ text_option }}</h3>
          <div>
            {% for option in options %}

              {% if option.type == 'select' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <select name="option[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-select">
                    <option value="">{{ text_select }}</option>
                    {% for option_value in option.product_option_value %}
                      <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }} <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>) {% endif %}</option>
                    {% endfor %}
                  </select>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'radio' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label class="form-label">{{ option.name }}</label>
                  <div id="input-option-{{ option.product_option_id }}">
                    {% for option_value in option.product_option_value %}
                      <div class="form-check">
                        <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                          {% if option_value.image %}
                            <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %}
                          {{ option_value.name }}
                          {% if option_value.price %}
                            ({{ option_value.price_prefix }}
                            <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>)
                          {% endif %}</label>
                      </div>
                    {% endfor %}
                  </div>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'checkbox' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label class="form-label">{{ option.name }}</label>
                  <div id="input-option-{{ option.product_option_id }}">
                    {% for option_value in option.product_option_value %}
                      <div class="form-check">
                        <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                          {% if option_value.image %}
                            <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %}{{ option_value.price_prefix }} {{ option_value.price }}{% endif %}" class="img-thumbnail"/>{% endif %}
                          {{ option_value.name }}
                          {% if option_value.price %}
                            ({{ option_value.price_prefix }}
                            <x-currency code="{{ currency }}" amount="{{ option_value.price }}"></x-currency>)
                          {% endif %}</label>
                      </div>
                    {% endfor %}
                  </div>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'text' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'textarea' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'file' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="button-upload-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>
                  <div>
                    <button type="button" id="button-upload-{{ option.product_option_id }}" data-oc-toggle="upload" data-oc-url="{{ upload }}" data-oc-target="#input-option-{{ option.product_option_id }}" data-oc-size-max="{{ config_file_max_size }}" data-oc-size-error="{{ error_upload_size }}" class="btn btn-light btn-block"><i class="fa-solid fa-upload"></i> {{ button_upload }}</button>
                    <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option-{{ option.product_option_id }}"/>
                  </div>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'date' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="date" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'time' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="time" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% if option.type == 'datetime' %}
                <div class="mb-3{% if option.required %} required{% endif %}">
                  <label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="datetime-local" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                  <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}

        {% if subscription_plans %}
          <hr/>
          <h3>{{ text_subscription }}</h3>
          <div class="mb-3">
            <select name="subscription_plan_id" id="input-subscription" data-on="change:onChange" class="form-select" required>
              <option value="">{{ text_select }}</option>
              {% for subscription_plan in subscription_plans %}
                <option value="{{ subscription_plan.subscription_plan_id }}">{{ subscription_plan.name }}</option>
              {% endfor %}
            </select>
            {% for subscription_plan in subscription_plans %}
              <div id="subscription-description-{{ subscription_plan.subscription_plan_id }}" class="form-text subscription d-none">{{ subscription_plan.description }}</div>
            {% endfor %}
            <div id="error-subscription" class="invalid-feedback"></div>
          </div>
        {% endif %}

        <div class="mb-3">
          <div class="input-group">
            <div class="input-group-text">{{ entry_qty }}</div>
            <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" data-bind="quantity" class="form-control"/>
            <button type="submit" id="button-cart" data-bind="button_cart" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>
          </div>
          <input type="hidden" name="product_id" value="{{ product_id }}" id="input-product-id"/>
          <div id="error-quantity" class="form-text"></div>
        </div>

        {% if minimum > 1 %}
          <div class="alert alert-warning"><i class="fa-solid fa-circle-info"></i> {{ text_minimum }}</div>
        {% endif %}
      </form>
    </div>
  </div>
</div>
<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#tab-description" data-bs-toggle="tab" class="nav-link active">{{ tab_description }}</a></li>
  {% if attribute_groups %}
    <li class="nav-item"><a href="#tab-specification" data-bs-toggle="tab" class="nav-link">{{ tab_attribute }}</a></li>
  {% endif %}
  {% if review_status %}
    <li class="nav-item"><a href="#tab-review" data-bs-toggle="tab" class="nav-link">{{ tab_review }}</a></li>
  {% endif %}
</ul>
<div class="tab-content">

  <div id="tab-description" class="tab-pane fade show active mb-4">
    {{ description }}
    {% if tags %}
      <p>{{ text_tags }}
        {% for tag in tags %}
          <a href="{{ tag.href }}">{{ tag.tag }}</a>{% if not loop.last %},{% endif %}
        {% endfor %}
      </p>
    {% endif %}
  </div>

  {% if attribute_groups %}
    <div id="tab-specification" class="tab-pane fade">
      <div class="table-responsive">
        <table class="table table-bordered">
          {% for attribute_group in attribute_groups %}
            <thead>
              <tr>
                <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
              </tr>
            </thead>
            <tbody>
              {% for attribute in attribute_group.attribute %}
                <tr>
                  <td>{{ attribute.name }}</td>
                  <td>{{ attribute.text }}</td>
                </tr>
              {% endfor %}
            </tbody>
          {% endfor %}
        </table>
      </div>
    </div>
  {% endif %}

  {% if review_status %}
    <div id="tab-review" class="tab-pane fade mb-4">{{ review }}</div>
  {% endif %}

</div>
{{ related }}
