{% if product.addons|length > 0 %}
<h5 class="mt-4 mb-1"><strong>{{ 'Addons & extras'|trans }}</strong></h5>
<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 }}
      </td>

      <td>
        <label class="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 | money_convert }} {% if prices.setup !=
              '0.00' %}{{ 'Setup:'|trans }} {{ prices.setup | money_convert }}{% endif %} ({{ periods[code] }})</option>
            {% endif %}
            {% endfor %}
          </select>
          {% endif %}

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

          {% if addon.pricing.type is same as('free') %}
          <span class="badge bg-success">{{ 0 | money_convert }}</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 %}