@extends("app.layout.base")

@section("title")
    Events - Tilmeldte
@endsection

@section("content")
    <style>
        .tbl {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        .tbl td,
        .tbl th {
            border: 1px solid #ddd;
            padding: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tbl tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .tbl tr:hover {
            background-color: #ddd;
        }

        .tbl th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #00788a;
            color: white;
        }

        .tbl > tbody > tr > td > a {
            width: 100%;
        }

        .tbl > tbody > tr > td > a > img {
            width: 1em;
            margin: auto;
        }
    </style>
    <main style="min-height: calc(100% - 61.3px)">
        <table class="tbl" style="margin: 2rem 8px 0px 8px; width: calc(100% - 16px);">
            <tr>
                <th style="text-align: center;">{{ __('msg.tilmeldtesnavn') }}</th>
            </tr>
            @foreach($events as $UE)
                @if ($UE->name_first != null && $UE->name_last != null && $UE->phone != null && $UE->event_id != null && $UE->user_id != null)
                    <tr>
                        <td>{{ $UE->name_first }} {{ $UE->name_last }}</td>
                    </tr>
                @endif
            @endforeach
            @if(count($events) == 0)
                <p class="text-center">Der er ingen tilmeldte</p>
            @endif
        </table>
        <button onclick="window.history.back();" style="margin-top: auto; margin-bottom: 8px;" class="btn btn-sde-blue text-white">{{ __('msg.tilbage') }}</button>
    </main>
@endsection