{% if product.addons|length > 0 %}
<h4 class="mt-4 mb-1"><strong>{{ 'Addons & Extras'|trans }}</strong></h4>
<table class="table table-sm table-borderless table-striped">
  <tbody>
    {% for addon in product.addons %}
    <tr>
      <td {% if not addon.icon_url %}style="display: none" {% endif %}>
        <label><img src="{{ addon.icon_url }}" alt="" width="36" /></label>
      </td>

      <td>
        <label>
          <h6><strong>{{ addon.title }}</strong></h6>
        </label>
        {{ (addon.description ?? '')|markdown_to_html }}
      </td>

      <td>
        <label class="currency">
          {% set cart_currency = guest.cart_get_currency %}
          {% if addon.pricing.type is same as('recurrent') %}
          {% set periods = guest.system_periods %}
          <select class="form-select" name="addons[{{ addon.id }}][period]" rel="addon-periods-{{ addon.id }}">
            {% for code, prices in addon.pricing.recurrent %}
            {% if prices.enabled %}
            <option value="{{ code }}">{{ (prices.price * cart_currency.conversion_rate)|format_currency(cart_currency.code) }} {% if prices.setup !=
              '0.00' %}{{ 'Setup:'|trans }} {{ (prices.setup * cart_currency.conversion_rate)|format_currency(cart_currency.code) }}{% endif %} ({{ periods[code] }})</option>
            {% endif %}
            {% endfor %}
          </select>
          {% endif %}

          {% if addon.pricing.type is same as('once') %}
          <span class="badge text-bg-success">{{ ((addon.pricing.once.price + addon.pricing.once.setup) * cart_currency.conversion_rate)|format_currency(cart_currency.code) }}</span>
          {% endif %}

          {% if addon.pricing.type is same as('free') %}
          <span class="badge text-bg-success">{{ 0|format_currency(cart_currency.code) }}</span>
          {% endif %}
        </label>

        <div class="float-end">
          <input type="radio" class="btn-check" name="addons[{{ addon.id }}][selected]" value="1"
            id="addon_{{ addon.id }}" autocomplete="off">
          <label class="btn btn-outline-success" for="addon_{{ addon.id }}" data-bs-toggle="tooltip"
            data-bs-title="{{ 'Add to cart'|trans }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="1.25em">
              <path d="M3.11 7.17L.048 4.106l1.144-1.144 3.062 3.062z" />
              <path d="M8.063 2.208L3.735 6.536l-1.22-1.22L6.843.988z" />
            </svg>
          </label>

          <input type="radio" class="btn-check" name="addons[{{ addon.id }}][selected]" value="0"
            id="addon_{{ addon.id }}_decline" autocomplete="off" checked>
          <label class="btn btn-outline-danger" for="addon_{{ addon.id }}_decline" data-bs-toggle="tooltip"
            data-bs-title="{{ 'Remove from cart'|trans }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="1.25em">
              <g fill-rule="evenodd">
                <path d="M2.048.77l5.18 5.182L5.953 7.23.77 2.048 2.048.77z" />
                <path d="M5.952.77L7.23 2.05 2.048 7.23.77 5.952 5.953.772z" />
              </g>
            </svg>
          </label>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
