@php
    $title = $enabled ? 'Two-Factor Authentication Enabled' : 'Two-Factor Authentication Disabled';
    $buttonText = $enabled ? 'Disable 2FA' : 'Enable 2FA';
    $buttonClass = $enabled ? 'btn btn-danger twofa-btn' : 'btn btn-success twofa-btn';
    $modalId = $enabled ? '#disableTwoFaConfirmModal' : '#enableTwoFaModal';
@endphp

<div>
    <div class="twofa-header">
        <div class="twofa-title {{ $enabled ? 'enabled' : 'disabled' }}">
            <div class="twofa-icon">
                <i class="fas fa-check"></i>
            </div>
            <h3>{{ $title }}</h3>
        </div>
        <label class="twofa-switch ml-5">
            <input type="checkbox" wire:model.live="enabled">
            <span class="twofa-slider"></span>
        </label>
    </div>

    <p class="twofa-desc">
        Two-factor authentication adds an extra layer of security to your account.
        You will be required to enter a verification code via an authenticator app
        when logging in
    </p>

    <button class="{{ $buttonClass }}" data-toggle="modal" data-target="{{ $modalId }}">{{ $buttonText }}</button>

    @include('admin.settings.partials.enable2fa')
    @include('admin.settings.partials.disable2fa')
</div>