
  
  <section class="common-pageheader" style="margin-bottom: 30px;">
      
      <div class="container">
  
  <div class="fr-cart-header mb-4">

    <h1>
        <i class="bi bi-cart3 me-2 text-success"></i>
        {{ heading_title }}

        {% if weight %}
            <span class="text-success">({{ weight }})</span>
        {% endif %}
    </h1>

    <p class="text-muted mb-0">
        Review your selected herbal medicines before proceeding to checkout.
    </p>

</div>
</div>
  </section>
  <div class="container mt-3">
    <div id="alert"></div>
</div>
  <div class="container" style="padding-bottom:100px;">
      {% if products %}
  {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> {{ error_warning }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endif %}
  {% if error_stock %}
    <div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> {{ error_stock }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endif %}
  {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa-solid fa-circle-check"></i> {{ success }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endif %}
  {% if attention %}
    <div class="alert alert-info"><i class="fa-solid fa-circle-info"></i> {{ attention }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endif %}
      
  
  <div id="output-cart" class="fr-cart-card table-responsive">
      
    <table class="table table-bordered">
      <thead>
        <tr>
          <th class="text-center">{{ column_image }}</th>
          <th>{{ column_name }}</th>
          <th>{{ column_quantity }}</th>
          <th class="text-end">{{ column_price }}</th>
          <th class="text-end">{{ column_total }}</th>
        </tr>
      </thead>
      <tbody>
        {% for product in products %}
          <tr>
            <td class="text-center">{% if product.thumb %}
            
            <a href="{{ product.href }}">
                
               <img
    src="{{ product.thumb }}"
    alt="{{ product.name }}"
    class="img-fluid fr-cart-image">
                
                </a>
                
                {% endif %}</td>
            <td class="text-start text-wrap">
                
                <h5 class="mb-2">
    <a href="{{ product.href }}" class="fr-product-title">
        {{ product.name }}
    </a>
</h5>
                
                {% if not product.stock %} <span class="text-danger">***</span>{% endif %}
              <ul class="list-unstyled mb-0">
                <li>
                  <small> - {{ text_model }}: {{ product.model }}</small>
                </li>
                {% for option in product.option %}
                  <li>
                    <small> - {{ option.name }}: {{ option.value }}</small>
                  </li>
                {% endfor %}
                {% if product.subscription %}
                  <li>
                    <small> - {{ text_subscription }}: {{ product.subscription }}</small>
                  </li>
                {% endif %}
                {% if product.reward %}
                  <li>
                    <small> - {{ text_points }}: {{ product.reward }}</small>
                  </li>
                {% endif %}
              </ul>
            </td>
            <td>
              <form method="post" data-oc-target="#shopping-cart">
                
                <div class="input-group fr-qty-group">

    <input
        type="number"
        class="form-control cart-qty"
        value="{{ product.quantity }}"
        min="1"
        data-cart-id="{{ product.cart_id }}">

    <button
        type="button"
        class="btn btn-success btn-update-cart"
        data-cart-id="{{ product.cart_id }}">

        <i class="bi bi-arrow-repeat"></i>

    </button>

    <button
        type="button"
        class="btn btn-danger btn-remove-cart"
        data-cart-id="{{ product.cart_id }}">

        <i class="bi bi-trash"></i>

    </button>

</div>
                
              </form>
              {% if product.minimum %}
                <small class="invalid-feedback d-block">{{ product.minimum }}</small>
              {% endif %}</td>
            <td class="text-end">{{ product.price }}</td>
            <td class="text-end">{{ product.total }}</td>
          </tr>
        {% endfor %}
      </tbody>
      <tfoot id="checkout-total">
        {% for total in totals %}
          <tr>
            <td colspan="4" class="text-end"><strong>{{ total.title }}</strong></td>
            <td class="text-end">{{ total.text }}</td>
          </tr>
        {% endfor %}
      </tfoot>
    </table>
  </div>

  {% if modules %}
    <h2>{{ text_next }}</h2>
    <p>{{ text_next_choice }}</p>
    <div id="accordion" class="accordion">
      {% for module in modules %}
        {{ module }}
      {% endfor %}
    </div>
  {% endif %}

  <br/>
  <div class="row">
    <div class="col"><a href="{{ continue }}" class="btn btn-light">{{ button_shopping }}</a></div>
    <div class="col text-end"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
  </div>
{% else %}
  <h1>{{ heading_title }}</h1>
  <p>{{ text_no_results }}</p>
  <div class="text-end"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
{% endif %}

</div>
