@layout('layouts.v2')

@section('content')
    <!--Main-->
    <div class="container px-20 mx-auto flex flex-wrap flex-col md:flex-row items-center">

      <!--Left Col-->
      <div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
        <h1
          class="my-10 text-3xl md:text-5xl text-gray-800 font-bold leading-tight text-center md:text-left slide-in-bottom-h1">
          👨🏾‍🍳  Server
        </h1>

        <p class="text-gray-700 font-bold pb-8 lg:pb-6 text-center md:text-left fade-in">
          Setup your client
        </p>
        <div class="flex w-full justify-center md:justify-start pb-0 fade-in">
          <ol class="list-decimal list-inside">
            <li>
              Logout of Ferdi, if you are currently logged in
            </li>
            <li>
              Choose "Change Server" to get to the settings screen
            </li>
            <li>
              Enter <code id="server"></code>
            </li>
          </ol>
        </div>

        <p class="text-gray-700 font-bold pb-8 lg:pb-6 text-center md:text-left fade-in pt-8">
          Manage your account
        </p>
        <a href="/user/account" class="bg-gray-700 hover:bg-gray-900 text-white font-bold text-center md:text-left  py-2 px-4 rounded">
          Go to account dashboard
        </a>
        <p class="text-gray-700 my-10 py-0 pb-8 lg:pb-6 text-center md:text-left fade-in pt-2"><em><a href="https://getferdi.com">Don't have Ferdi yet?</a></em></p>
      </div>

      <!--Right Col-->
      <div class="w-full xl:w-3/5 py-6 overflow-y-hidden">
        <img class="w-5/6 mx-auto lg:mr-0 slide-in-bottom" src="{{ assetsUrl('img/hero.png') }}">
      </div>

    </div>

    <script>
      // Get server URL for current location
      let server = location.href.replace('/index.html', '');
      if (server[server.length - 1] == '/') {
        server = server.substr(0, server.length - 1)
      }

      // Show on page
      document.getElementById('server').innerText = server;

    </script>
@endsection