<ul class="uk-list uk-list-large uk-list-divider" x-data="component()" x-init="init()">
  <li><a class="uk-link-reset" href="<%= base_url %>admin/user">User Management</a></li>
  <li>
    <a class="uk-link-reset" @click="scan()">
      <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
      <div class="uk-align-right">
        <div uk-spinner x-show="scanning"></div>
        <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
      </div>
    </a>
  </li>
  <li>
    <a class="uk-link-reset" @click="generateThumbnails()">
      <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
      <div class="uk-align-right">
        <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
      </div>
    </a>
  </li>
  <li>
    <span>Theme</span>
    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2" :val="themeSetting" @change="themeChanged($event)">
      <option>Dark</option>
      <option>Light</option>
      <option>System</option>
    </select>
  </li>
</ul>

<hr class="uk-divider-icon">
<p class="uk-text-meta">Version: v<%= MANGO_VERSION %></p>
<a class="uk-button uk-button-danger" href="<%= base_url %>logout">Log Out</a>

<% content_for "script" do %>
  <script src="<%= base_url %>js/admin.js"></script>
<% end %>
