<div class="row mx-0 px-0 position-relative" result1="{{ $coin->name }}" result2="{{ $coin->symbol }}">
    
    <div class="col-2 mx-0 px-0  position-relative" align="left">
        <x-widgets.coin-image :$coin />
    </div>

    <div class="col-6 mx-0 px-0" align="left">
        <font class="fs-5">{{ $coin->symbol }}</font><br>
        <font class="tfss text-muted">{{ $coin->name }}</font>
    </div>
    <div class="col-4 mx-0 px-0" align="right" x-data="manage" x-init="active = @js($coin->user_settings->is_active)">

        <button
            @click="change"
            type="button"
            @class([
                'cmarker btn btn-lg btn-toggle border border-light',
                'active' => $coin->user_settings->is_active,
            ])>
            <div class="handle"></div>
        </button>

    </div>
    <div class="border-sbottom w-100 pb-3 mb-3"></div>
</div>