<div id="commission-calculator" class="border-2 border-gray-900 p-4 bg-gray-50 space-y-3" data-eticket-rate="{{ app.user.commissionRate ?? 0 }}" data-stripe-rate="1.5" data-stripe-fixed="0.25">
    <h3 class="text-xs font-black uppercase tracking-widest mb-2">Detail des commissions</h3>

    <div class="flex justify-between text-sm">
        <span class="font-bold text-gray-600">Prix de vente HT</span>
        <span class="font-black" id="calc-price">0,00 &euro;</span>
    </div>

    <div class="flex justify-between text-sm">
        <span class="font-bold text-gray-600">Commission E-Ticket ({{ app.user.commissionRate ?? 0 }}%)</span>
        <span class="font-black text-red-600" id="calc-eticket">- 0,00 &euro;</span>
    </div>

    <div class="flex justify-between text-sm">
        <span class="font-bold text-gray-600">Commission Stripe (1.5% + 0,25 &euro;)</span>
        <span class="font-black text-red-600" id="calc-stripe">- 0,00 &euro;</span>
    </div>

    <hr class="border-gray-300">

    <div class="flex justify-between text-sm">
        <span class="font-black uppercase">Total commissions</span>
        <span class="font-black text-red-600" id="calc-total">- 0,00 &euro;</span>
    </div>

    <div class="flex justify-between text-base border-t-2 border-gray-900 pt-3">
        <span class="font-black uppercase">Montant percu</span>
        <span class="font-black text-green-600 text-lg" id="calc-net">0,00 &euro;</span>
    </div>
</div>
