<div class="header">
  <div class="top-left-block">
    <a class="peertube-title c-hand">
      <span class="icon icon-logo"></span>
      <span class="instance-name">076動画</span>
    </a>
    <a class="peertube-title c-hand" href="http://{{ env('ONION_HOST') }}">
      <span class="icon icon-logo"></span>
      <span class="publish-button-label">Tor</span>
    </a>
    <a class="peertube-title c-hand" href="/feed">
      <span class="icon icon-logo"></span>
      <span class="publish-button-label">RSS</span>
    </a>
  </div>
  <div class="header-right">
    <my-header class="w-100 d-flex justify-content-end">
      <my-search-typeahead class="w-100 d-flex justify-content-end">
        <div id="typeahead-container" class="d-inline-flex position-relative">
          <input type="text" id="search-video" name="search-video" placeholder="動画、プレイリスト、チャンネルを検索する…" aria-label="Search" autocomplete="off" class="ng-untouched ng-pristine ng-valid">
          <my-global-icon title="検索" role="button" iconname="search" class="icon icon-search">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
          </my-global-icon>
          <!--div class="position-absolute jump-to-suggestions">
            <ul role="listbox" class="p-0 m-0" hidden="">
            </ul>
            <div id="typeahead-instructions" class="overflow-hidden ng-star-inserted">
              <span class="text-muted">Your query will be matched against video names or descriptions, channel names.</span>
              <div class="d-flex justify-content-between mt-3">
                <label class="small-title">高度な検索</label>
                <div class="advanced-search-status c-help">
                  <span title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows." class="text-success">
                    <span class="mr-1 ng-star-inserted">any instance</span>
                    <i class="glyphicon glyphicon-ok-sign"></i>
                  </span>
                </div>
              </div>
              <ul>
                <li>
                  <em>@channel_id@domain</em>
                  <span class="flex-auto text-muted">検索にマッチしたチャンネルを表示します</span>
                </li>
                <li>
                  <em>URL</em>
                  <span class="text-muted">検索にマッチしたチャンネルを表示します</span>
                </li>
                <li>
                  <em>UUID</em>
                  <span class="text-muted">検索にマッチした動画を表示します</span>
                </li>
              </ul>
            </div>
          </div-->
        </div>
      </my-search-typeahead>
      <a class="publish-button" href="/videos/upload">
        <my-global-icon iconname="upload" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
        </my-global-icon>
        <span class="publish-button-label">投稿</span>
      </a>
    </my-header>
  </div>
</div>
