<div 
    x-data="swap"
    x-init="
        from.price = {{ $from_coin->details->price }};
        to.price = {{ $to_coin->details->price }};
    "
    >
    <x-slot:right>
        <i class="bi bi-gear-fill jexshort" style="font-size:22px;" rels=".csettings"></i>
    </x-slot:right>

    @include('partials.swap.from')

    <div class="p-2 pb-0 darkandgray" align="center">
        <i class="bi bi-arrow-down-circle-fill fs-1"></i>
    </div>

    @include('partials.swap.to')

    <x-form.submit target="validateDetails" wire:click.prevent="validateDetails" text="Swap" class="mt-5 btn-warning w-100 rounded-4 fs-3" />

    @include('partials.swap.confirm-bottom-sheet')

    @include('partials.swap.from-bottom-sheet')

    @include('partials.swap.to-bottom-sheet')

   @include('partials.swap.settings-bottom-sheet')
</div>