{% extends "master.html" %}
{% from "_projectstring.html" import projectstring, projecticon %}

{% block title %}{{
    repo.namespace + '/' if repo.namespace }}{{ repo.name }}{% endblock %}
{% set tag = "home" %}

{% block header %}
<link type="text/css" rel="stylesheet" nonce="{{ g.nonce }}" href="{{
  url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}?version={{ g.version}}"/>
{% endblock %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col userdash-tabs">
      <ul class="nav nav-tabs nav-sidetabs flex-column border-bottom-0">
        <li class="pl-3 pb-3 font-weight-bold">
            {{ g.fas_user.username | avatar(20) | safe }} {{g.fas_user.username}}
        </li>

        <li class="pr-2 py-3 font-size-09">
          <form action="{{url_for('ui_ns.search')}}" id="userdash_searchform">
            <select id="userdash-search" name="term" placeholder="find {{projectstring(plural=True)}} &amp; forks"></select>
            <input type="hidden" name="direct" readonly value="1">
          </form>
        </li>

        <li class="nav-item text-dark">
          <a class="nav-link d-flex align-items-center {{'active' if select=='projects'}}"
            href="{{ url_for('ui_ns.index')}}">
            <span>
              <i class="fa {{projecticon()}} fa-fw text-muted"></i>
              <span class="d-none d-md-inline">{{projectstring(plural=True)}}&nbsp;</span>
            </span>
            <div class="ml-auto">
              <span class="badge badge-secondary">
                {{ userdash_counts['repos_length'] }}
              </span>
            </div>
          </a>
        </li>

        {% if userdash_counts['forks_length'] > 0 %}
        <li class="nav-item text-dark">
          <a class="nav-link d-flex align-items-center {{'active' if select=='forks'}}"
            href="{{ url_for('ui_ns.userdash_forks')}}">
            <span>
              <i class="fa fa-fw text-muted fa-code-fork"></i>
              <span class="d-none d-md-inline">Forks&nbsp;</span>
            </span>
            <div class="ml-auto">
              <span class="badge badge-secondary">
                {{ userdash_counts['forks_length'] }}
              </span>
            </div>
          </a>
        </li>
        {% endif %}

        <li class="mt-4"></li>

        <li class="nav-item text-dark">
          <a class="nav-link d-flex align-items-center {{'active' if select=='activity'}}"
            href="{{ url_for('ui_ns.userdash_activity')}}">
            <span>
              <i class="fa fa-fw text-muted fa-users"></i>
              <span class="d-none d-md-inline">Activity&nbsp;</span>
            </span>
          </a>
        </li>

        {% if userdash_counts['groups_length'] > 0 %}
        <li class="nav-item text-dark">
          <a class="nav-link d-flex align-items-center {{'active' if select=='groups'}}"
            href="{{ url_for('ui_ns.userdash_groups')}}">
            <span>
              <i class="fa fa-fw text-muted fa-users"></i>
              <span class="d-none d-md-inline">Groups&nbsp;</span>
            </span>
            <div class="ml-auto">
              <span class="badge badge-secondary">
                {{ userdash_counts['groups_length'] }}
              </span>
            </div>
          </a>
        </li>
        {% endif %}

        <li class="nav-item text-dark">
          <a class="nav-link d-flex align-items-center {{'active' if select=='watchlist'}}"
            href="{{ url_for('ui_ns.userdash_watchlist')}}">
            <span>
              <i class="fa fa-fw text-muted fa-eye"></i>
              <span class="d-none d-md-inline">Watchlist&nbsp;</span>
            </span>
            <div class="ml-auto">
              <span class="badge badge-secondary">
                {{ userdash_counts['watchlist_length'] }}
              </span>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <div class="col-9">
      {% block userdash %}
      {% endblock %}
    </div>
  </div>
</div>
{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
   url_for('static', filename='vendor/selectize/selectize.min.js') }}?version={{ g.version}}"></script>

<script type="text/javascript" nonce="{{ g.nonce }}">
$('#userdash-search').selectize({
    persist: false,
    maxItems: 1,
    create: false,
    openOnFocus: false,
    valueField: 'repo_fullname',
    labelField: 'repo_displayname',
    searchField: ['repo_displayname'],
    onChange: function(value){
      if (value != ""){
        $('#userdash_searchform').submit();
      }
    },
    options: [
        {% for repo in search_data %}
      {% set displayname = "" %}
      {% if repo.is_fork %}{% set displayname = displayname+repo.user.user+"/" %}{%endif%}
      {% if repo.namespace %}{% set displayname = displayname+repo.namespace+"/" %}{%endif%}
      {% set displayname = displayname+repo.name %}
      {% if repo.fullname[:6] == "forks/" %}
          {% set repo_fullname = "fork/"+repo.fullname[6:] %}
      {% else %}
          {% set repo_fullname = repo.fullname %}
      {% endif %}
      {repo_fullname: '{{repo_fullname}}', repo_displayname: '{{displayname}}', is_fork: '{{repo.is_fork}}'},
      {% endfor %}
    ],
    render: {
      option: function(item, escape) {
        return '<div>' +
          (item.is_fork == "True" ? '<span class="fa fa-fw fa-code-fork"></span>' : '<i class="fa fa-fw {{projecticon()}}"></i> ') +
          '<span class="label">' + escape(item.repo_displayname) + '</span>' +
        '</div>';
      }
    },
});
</script>

{% endblock %}