<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">
    <i class="icon ion-md-git-branch"></i> <strong>{{ 'REPOSITORY_REFLIST_TOGGLE'|trans }}</strong> {{ ref }}
  </a>
  <div class="dropdown-menu ref-list">
    <div class="input-group">
      <input type="text" list="refs" class="form-control" placeholder="{{ 'REPOSITORY_REFLIST_PLACEHOLDER'|trans }}">
      <datalist id="refs">
        {% for branch in repository.branches %}
          <option value="{{ branch.name }}" data-target="{{ path(path, {repository: repository.name, commitish: getCommitish(branch.name, refPath) }) }}">
        {% endfor %}
        {% for tag in repository.tags %}
          <option value="{{ tag.name }}" data-target="{{ path(path, {repository: repository.name, commitish: getCommitish(tag.name, refPath) }) }}">
        {% endfor %}
      </datalist>
    </div>

    {% set hasBranches = repository.branches|length > 0 %}
    {% set hasTags = repository.tags|length > 0 %}

    <ul class="nav nav-tabs" id="reflist" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="branches-tab" data-bs-toggle="tab" data-bs-target="#branches" type="button" role="tab" aria-controls="branches" aria-selected="true">Branches</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tags-tab" data-bs-toggle="tab" data-bs-target="#tags" type="button" role="tab" aria-controls="tags" aria-selected="false">Tags</button>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="branches" role="tabpanel" aria-labelledby="branches-tab">
        <ul class="list-group list-group-flush">
        {% if hasBranches %}
          {% for branch in repository.branches %}
            <a class="list-group-item list-group-item-action" href="{{ path(path, {repository: repository.name, commitish: getCommitish(branch.name, refPath) }) }}" title="{{ branch.name }}">{{ branch.name }}</a>
          {% endfor %}
        {% endif %}
        </ul>
      </div>
      <div class="tab-pane" id="tags" role="tabpanel" aria-labelledby="tags-tab">
        <ul class="list-group list-group-flush">
          {% if hasTags %}
            {% for tag in repository.tags %}
              <a class="list-group-item list-group-item-action" href="{{ path(path, {repository: repository.name, commitish: getCommitish(tag.name, refPath) }) }}" title="{{ tag.name }}">{{ tag.name }}</a>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
    </div>

  </div>
</div>
