{% from "components/icon.html" import Icon %}
{% from "components/sidenav_item.html" import SidenavItem %}


<div v-cloak is="SidenavToggler" class="global-navigation">
  <template slot-scope='props'>
    <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
      <div class="sidenav-container__fixed">
        <div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
          <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
            <template v-if="props.isVisible">
              {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
              Hide
            </template>
            <template v-else>
              Show
              {{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
            </template>
          </a>
          <div v-if="props.isVisible">
            <div class="sidenav__title">Portfolios</div>
            <ul class="sidenav__list--padded">
              {% if portfolios %}
                {% for other_portfolio in portfolios|sort(attribute='name') %}
                  {{ SidenavItem(other_portfolio.name,
                    href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
                    active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
                    ) }}
                {% endfor %}
              {% else %}
                <li><span class="sidenav__text">You have no portfolios yet</span></li>
              {% endif %}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>
