@extends('layouts.admin_auth')

@section('content')


<main class="h-full pb-16 overflow-y-auto">
          <div class="container flex flex-col items-center px-6 mx-auto">
            <svg
              class="w-12 h-12 mt-8 text-purple-200"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fill-rule="evenodd"
                d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <br />
            <h1 class="text-4xl font-semibold text-white dark-textt">
              Your account has been Banned
            </h1>
            <br />
            <p class="text-white dark-textt">
              Oops, dear {{ Auth::user()->first_name }} looks like your store activity broke our <a href="{{ route('community-guidelines') }}" target="_blank" class="text-purple-600 hover:underline">community guidelines</a>. 
              <br />
              Please contact support to file an appeal or for more info.
              <br /><br />
              <a
                class="text-purple-600 hover:underline"
                href="{{ route('logout') }}" onclick="event.preventDefault();
                                                        document.getElementById('logout-form').submit();"
              >
                Logout
              </a>
              <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
              </form>
            </p>
          </div>
        </main>

<script>
    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (!isDark) {
        const el = document.getElementsByClassName('dark-textt');
        // el.style.backgroundColor = '#111827'; // Dark background
        // el.style.color = '#111827'; // Dark text
        for (let i = 0; i < el.length; i++) {
            el[i].style.color = '#111827';
        }
    }
</script>

@endsection