@if(config('demo.enabled'))
<div class="col-12">
    <div class="text-center">
        <table class="table table-sm table-bordered mb-0">
            <thead>
                <tr class="bg-secondary text-white text-center align-middle">
                    <th>{{ __('app.email') }}</th>
                    <th>{{ __('app.password') }}</th>
                    <th>{{ __('app.action') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">admin@example.com</td>
                    <td class="text-center">12345678</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-primary admin">
                            {{ __('app.apply') }}
                        </button>
                    </td>
                </tr>

                <tr>
                    <td class="text-center">seller@example.com</td>
                    <td class="text-center">12345678</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-primary seller">
                            {{ __('app.apply') }}
                        </button>
                    </td>
                </tr>

                <tr>
                    <td class="text-center">purchase@example.com</td>
                    <td class="text-center">12345678</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-primary purchase">
                            {{ __('app.apply') }}
                        </button>
                    </td>
                </tr>

                <!-- Repair Shop Highlight -->
                <tr>
                    <td colspan="3" class="p-0">
                        <div class="bg-warning bg-opacity-10 border-top border-bottom border-warning py-2">
                            <h6 class="mb-0 text-warning fw-bold">
                                <i class="bx bx-wrench me-1"></i>
                                Repair Shop Module Demo Accounts
                            </h6>
                            <small class="text-muted">
                                Experience repair workflow with Technician and Receptionist roles
                            </small>
                        </div>
                    </td>
                </tr>

                <tr class="table-warning">
                    <td class="text-center">
                        <span class="badge bg-warning text-dark me-1">
                            <i class="bx bx-user"></i>
                        </span>
                        technician@example.com
                    </td>
                    <td class="text-center">12345678</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-warning technician">
                            Login as Technician
                        </button>
                    </td>
                </tr>

                <tr class="table-warning">
                    <td class="text-center">
                        <span class="badge bg-info me-1">
                            <i class="bx bx-headphone"></i>
                        </span>
                        reception@example.com
                    </td>
                    <td class="text-center">12345678</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-info text-white reception">
                            Login as Receptionist
                        </button>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
@endif