@push('title', 'Gmail API Sender')

<div class="content-wrapper">
    <!-- Row for cards -->
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                @include('gsenderv1.header')
            </div>
        </div>
        <div class="col-md-4">
            @livewire('server-selection')
        </div>
        <div class="col-md-3">
            <div class="card">
                @include('gsenderv1.savedConfigs')
            </div>
        </div>
    </div>


    <!-- Row for cards -->
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                @include('gsenderv1.body')
            </div>
        </div>
        <div class="col-md-7">
            <div class="card">
                @livewire('offer-selector')
            </div>
        </div>

    </div>

    <!-- Full-width card -->
    <div class="card">
    </div>


    <!-- Row for smaller cards -->
    <div class="row">
        @foreach(['emaillists', 'settings', 'gmail', 'gsuit', 'placeholder'] as $part)
        <div class="col-md-2">
            <div class="card">
                @include("gsenderv1.$part")
            </div>
        </div>
        @endforeach
    </div>

    <!-- OutputTest Sections -->
    @if(!empty($testOutput))
    <div class="alert alert-info mt-4">
        <h5>Test Output:</h5>
        <pre>{{ $testOutput }}</pre>
    </div>
    @endif
    @if(!empty($compignOutput))
    <div class="alert alert-info mt-4">
        <h5>Campaign Output:</h5>
        <pre>{{ $compignOutput }}</pre>
    </div>
    @endif

</div>