<!DOCTYPE html>
<html class="dark">

<head>
  <title>Social Robot</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/stylesheets/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
    integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
</head>

<body class="bg-white dark:bg-gray-800 dark:text-white">
  <div class="lg:px-24 mx-auto">

    <div class="lg:flex justify-center">
      <div class="lg:w-72 lg:overflow-y-hidden">
        <form method="GET">
          <div class="relative text-gray-600 focus-within:text-gray-400">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
              <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  viewBox="0 0 24 24" class="w-6 h-6">
                  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </span>
            <input type="search" name="q"
              class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
              placeholder="Search..." autocomplete="off">
          </div>
        </form>
        <div class="flex items-center justify-between mt-5">
          <div class="flex items-center">
            <img src="/images/avatar_48.png" alt="John Doe" class="rounded-md mr-2">
            <div>
              <div class="w-full font-bold text-sm">John Doe</div>
              <div class="w-full text-sm text-gray-400">john.doe@uplink.si</div>
            </div>
          </div>
          <div>
            <button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
            
            <!-- This is an example component -->
            <div class="max-w-lg mx-auto">
              <!-- Dropdown menu -->
              <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
                <ul class="py-1" aria-labelledby="dropdown">
                  <li>
                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
                  </li>
                  <li>
                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
                  </li>
                  <li>
                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
                  </li>
                  <li>
                    <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
                  </li>
                </ul>
              </div>            
            </div>
            <script src="/scripts/flowbite.js"></script>


          </div>
        </div>
        <div class="my-5">
          <form action="">
            <textarea
              class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
              name="body" id="" cols="20" placeholder="What's on your mind?"></textarea>
            <hr class="my-4">
            <div class="flex justify-end">
              <button
                class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
                type="submit">TOOT!</button>
            </div>
          </form>
        </div>
      </div>

      <div
        class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white  scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
        <div class="lg:h-screen">
          <div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
              <div><i class=" fa fa-home mr-2"></i>Home</div>
          <div><i class="fa fa-sliders"></i></div>
        </div>
        <div class="max-h-40 overflow-y-hidden align-bottom">
          <img class="object-none object-center" src="/images/19187755.jpg" alt="paralax">
        </div>
        <div class="flex justify-between">
          <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
            <img src="/images/avatar_94.png" alt="John Doe" class="rounded-md overflow-visible">
          </div>
          <div class="flex items-center pt-3 px-2 mx-2">
            <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
              type="submit">Follow</button>
            <button
              class="bg-gray-600 border border-b-gray-400 py-2 px-5 rounded-md focus:outline-none focus:shadow-outline shadow-xl"
              type="submit"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>

        <div class="p-4">
          <div>
            <h4 class="font-bold">John Doe</h4>
            <p class="text-sm text-gray-400">john.doe@uplink.si</p>
          </div>
          <div class="text-sm text-gray-400 mt-3">
            <p>Joined Dec 28, 2021</p>
            <div class="flex">
              <div class="pr-5"><span class="text-white">5</span> Posts</div>
              <div class="pr-5"><span class="text-white">3</span> Following</div>
              <div class="pr-5"><span class="text-white">7</span> Followers</div>
            </div>
          </div>
        </div>
        <% for(var i=0; i < 8; i++) {%>
          <%- include('partials/_toot') %>
            <% } %>
      </div>
    </div>

    <div class="lg:w-72 lg:overflow-y-hidden">
      <ul class="p-5">
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-home mr-2"></i>Home</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-bell mr-2"></i>Notifications</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Local</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-globe mr-2"></i>Federated</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-envelope mr-2"></i>Direct messages</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-star mr-2"></i>Favourites</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-bookmark mr-2"></i>Bookmarks</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-list mr-2"></i>Lists</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-address-book mr-2"></i>Profile directory</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-cog mr-2"></i>Preferences</a>
        </li>
        <li>
          <a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Follows and followers</a>
        </li>
      </ul>
    </div>

  </div>
  </div>
</body>

</html>