<script>
    import {Navigate} from 'svelte-router-spa'

    export let name;
    export let avatar;

    export let isWhitelabel = false;
    export let isAdmin = false;
</script>

<div class="sidebar">
  <div class="sidebar-container" id="sidebar-nav">
    <div class="inner">
      <Navigate to="/" styles="sidebar-link">
        <div class="sidebar-element">
          <i class="fas fa-server sidebar-icon"></i>
          <span class="sidebar-text">Servers</span>
        </div>
      </Navigate>
      {#if isWhitelabel}
        <Navigate to="/whitelabel" styles="sidebar-link">
          <div class="sidebar-element">
            <i class="fas fa-edit sidebar-icon"></i>
            <span class="sidebar-text">Whitelabel</span>
          </div>
        </Navigate>
      {:else}
        <a href="https://ticketsbot.net/premium" class="sidebar-link">
          <div class="sidebar-element">
            <i class="fas fa-edit sidebar-icon"></i>
            <span class="sidebar-text">Whitelabel</span>
          </div>
        </a>
      {/if}
      {#if isAdmin}
        <Navigate to="/admin/bot-staff" styles="sidebar-link">
          <div class="sidebar-element">
            <i class="fa-solid fa-user-secret sidebar-icon"></i>
            <span class="sidebar-text">Admin</span>
          </div>
        </Navigate>
      {/if}
    </div>
  </div>
  <div class="sidebar-container">
    <div class="sidebar-element">
      <Navigate to="/logout" onclick="clearLocalStorage();" styles="sidebar-link">
        <i class="sidebar-icon fas fa-sign-out-alt sidebar-icon"></i>
        <span class="sidebar-text">Logout</span>
      </Navigate>
    </div>
    <div class="sidebar-element user-element">
      <a class="sidebar-link">
        <i id="avatar-sidebar" style="background: url('{avatar}') center center;"></i>
        {#if name !== undefined}
          <span class="sidebar-text">{name}</span>
        {/if}
      </a>
    </div>
  </div>
</div>

<style>
    .sidebar {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 16.6%;
        background-color: #272727;
        float: left;
        background-size: cover;
        overflow-x: hidden !important;
        min-width: 250px;
    }

    .sidebar-container {
        margin-bottom: 2%;
    }

    .inner {
        width: 100%;
    }

    .sidebar-element {
        display: flex;
        align-items: center;
        width: 100%;
        cursor: pointer;
        padding: 5px 4%;
    }

    .sidebar-element:hover {
        background-color: #121212;
        transition: background-color 0.5s ease;
    }

    #custom-image {
        max-height: 70px;
        max-width: 90%;
    }

    /*
     * Need global for Navigate link styling
     */
    :global(.sidebar-link) {
        display: flex;
        align-items: center;
        color: white !important;
        font-size: 18px;
        text-decoration: none;
    }

    .sidebar-text {
        margin-left: 4%;
        display: flex;
        align-items: center;
    }

    #sidebar-nav {
        display: flex;
        flex: 1;
    }

    .ref {
        display: flex;
        justify-content: center;
    }

    .ref-wrapper {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        margin: 0 !important
    }

    #avatar-sidebar {
        width: 32px;
        height: 32px;
        display: block;
        background-size: cover !important;
        border-radius: 50%;
    }

    @media (max-width: 950px) {
        .sidebar {
            flex-direction: row;
            width: 100%;

            height: unset;
            min-width: unset;

            overflow: visible !important;
        }

        .ref {
            display: none;
        }

        .sidebar-container {
            margin-bottom: unset;
        }

        .inner {
            display: flex;
        }

        .sidebar-element {
            width: unset;
            padding: 20px 15px;
        }

        :global(.sidebar-link) {
            width: unset;
        }

        .user-element {
            display: none;
        }
    }
</style>
