thedrummeraki/tanoshimu

<nav class="navbar is-spaced <%= header_appearance %> becomes-transparent" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <%= image_tag 'tanoshimu', class: 'logo' %><h1 class="hide logo-title"><%= t('app.name') %></h1>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <%= link_to(platforms_path, class: 'navbar-item') do %>
        <i class="material-icons">star</i>
        <%= t('header.available_platforms') %>
      <% end %>

      <%= link_to(shows_path, class: 'navbar-item') do %>
        <i class="material-icons" style="padding-right: 5px">visibility</i>
        <%= t('sidebar.anime-movies') %>
      <% end %>
    </div>

    <div style="justify-content: center; display: inline; padding-top: 10px; white-space: nowrap;">
      <%= form_tag shows_path, method: 'get' do -%>
        <div class="control">
          <div class="autocomplete">
            <input id="search-input" style="padding-right: 36px; left: -18px;" type="text" name="query" placeholder="<%= t('header.search') %>" value="<%= params[:query] %>" class="input is-rounded is-dark is-loading" autocomplete="off">
            <button style="left: -54px;" type="submit" class="button is-icon">
              <i class="material-icons">search</i>
            </button>
            <div id="search-results" class="autocomplete-items"></div>
          </div>
        </div>
      <% end -%>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <% link_to(new_issue_path, class: 'button is-warning is-icon') do %>
            <i class="material-icons">bug_report</i>
          <% end %>
          <% unless Config.demo? %>
            <% if current_user.can_manage? %>
              <%= link_to(admin_path, class: 'button is-warning is-icon', target: :_blank) do %>
                <i class="material-icons">admin_panel_settings</i>
              <% end %>
            <% end %>
            <% if current_user.oauth? %>
              <% if current_user.misete? %>
                <%= link_to(ENV['MISETE_OAUTH_HOST'], class: 'button is-primary is-icon', target: :_blank) do %>
                  <i class="material-icons">settings</i>
                <% end %>
              <% end %>
            <% end %>
            <% link_to(my_queue_path, class: 'button is-success is-icon') do %>
              <i class="material-icons">add</i>
            <% end %>
            <%= link_to(my_queue_path, class: 'button is-dark is-icon') do %>
              <i class="material-icons">list</i>
            <% end %>
            <%= link_to(logout_then_redirect_path, class: 'button is-danger is-icon') do %>
              <i class="material-icons">power_settings_new</i>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</nav>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    const searchInput = $('#search-input');
    const searchResults = $('#search-results');

    searchInput.on('keydown', function(e) {
      const query = $(this).val();

      if (query.length > 2) {
        $.ajax({
          url: '/search',
          data: { query: query },
          success: function(html) {
            searchResults.show();
            searchResults.html(html);
          }
        });
      } else {
        searchResults.hide();
      }
    });
  });
</script>