<div {{ attributes.defaults({ 'data-review-opt-out': '', class: 'w-full' }) }}>
    {% if saved %}
        <div
            data-review-opt-out-status
            class="border border-emerald-200 bg-emerald-50 px-5 py-4 text-[15px] leading-7 text-emerald-800"
            role="status"
        >
            {{ 'marketing.review.opt_out.saved'|trans }}
        </div>
    {% elseif this.alreadyOptedOut %}
        <div
            data-review-opt-out-status
            class="border border-primary/10 bg-white/70 px-5 py-5 text-[15px] leading-7 text-primary/72"
            role="status"
        >
            {{ 'marketing.review.opt_out.already_saved'|trans }}
        </div>
    {% else %}
        <button
            class="inline-flex min-h-[48px] w-full cursor-pointer items-center justify-center bg-primary px-6 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary disabled:cursor-not-allowed disabled:bg-primary/30 sm:w-auto"
            type="button"
            data-action="live#action"
            data-live-action-param="confirmOptOut"
            data-loading="addAttribute(disabled)"
        >
            {{ 'marketing.review.opt_out.confirm'|trans }}
        </button>
    {% endif %}
</div>
