{% if browserArray %}
<div id="filebrowser" class="panel panel-warning">
    <div class="panel-heading">
        <div class="dropdown">
            <a class="dropbown-toggle panel-title" data-toggle="dropdown" href="#">Browser - {{activeBrowser}} - current dir: {{ browserWorkingDir }}
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              {% for browser in browserArray%}
                <li>
                    <a href="./selectBrowser?id={{loop.index0}}">{{browser}}</a>
                </li>
               {% endfor %}
            </ul>
        </div>
    </div>
    <div class="panel-body">
      {% if browserSearch  %}
        <div class="input-group">
          <input type="text" id="browserSearch" class="form-control">
          <div class="input-group-btn">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Search <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a id="searchFile" href="#">Search File</a></li>
              <li><a id="searchDir" href="#">Search Directory</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
        <hr>
      {% endif %}
        <div class="list-group">
            {% for key,value in browserDirs.items() %}
              <a href="./change?id={{ key }}"  class="list-group-item">{{value}}</a>
            {% endfor %}
        </div>
        <hr>
        <div class="list-group">
            {% for key,value in browserFiles.items() %}
                <a href="./play?id={{ key }}" class="list-group-item">{{value}}</a>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
