<div class="page-wrapper">
  <div class="tabs-bar__wrapper">
    <nav class="tabs-bar">
      <a class="tabs-bar__link button-link{{ home_link_active }}" data-button="home" aria-label="{% trans %}Home{% endtrans %}" href="{{ reader_home_link }}"><i role="img" class="fa fa-home fa-fw"></i><span>{% trans %}Home{% endtrans %}</span></a>
      <a class="tabs-bar__link button-link" data-button="read" aria-label="{% trans %}Read{% endtrans %}" href="#"><i role="img" class="fa fa-stream fa-fw"></i><span>{% trans %}Read{% endtrans %}</span></a>
      <a class="tabs-bar__link button-link{{ create_link_active }}" data-button="write" aria-label="{% trans%}Create{% endtrans %}" href="#"><i role="img" class="fa fa-pencil-alt fa-fw"></i><span>{% trans %}Write{% endtrans %}</span></a>
      <a class="tabs-bar__link button-link{{ search_link_active }}" data-button="search" aria-label="{% trans%}Search{% endtrans %}" href="#"><i role="img" class="fa fa-search fa-fw"></i><span>{% trans %}Search{% endtrans %}</span></a>
    </nav>
  </div>
  <div class="app-holder">
    <div class="ui">
      <div class="columns-area">
        <div class="column column-1">
          <div class="column-header__wrapper"><h1 class="column-header"><button><i role="img" class="fa fa-home column-header__icon fa-fw"></i>{{ page['#title'] }}</button>
              <span class="column-header__buttons">
                <button class="column-header__button search" title="{% trans %}Search{% endtrans %}" aria-label="{% trans %}Search{% endtrans %}" aria-pressed="false"><i class="icon-with-badge"><i role="img" class="fa fa-search"></i></i></button>
                <button class="column-header__button actions" title="{% trans %}Show actions{% endtrans %}" aria-label="{% trans %}Show actions{% endtrans %}" aria-pressed="false"><i class="icon-with-badge"><i role="img" class="fa fa-sliders-h"></i></i></button>
              </span>
            </h1>
            <div class="column-header__collapsible actions-container collapsed"><div class="column-header__collapsible-inner"><div class="column-header__collapsible__extra">{{ page.actions }}</div></div></div>
            <div class="column-header__collapsible search-container collapsed"><div class="column-header__collapsible-inner"><div class="column-header__collapsible__extra">{{ page.search }}</div></div></div>
          </div>
          <div class="scrollable">
            {{ page.content }}
          </div>
          {% if page.messages %}
            {{ page.messages }}
          {% endif %}
        </div>
        <div class="column column-2">
          {{ page.column_2 }}
        </div>
        <div class="column column-3">
          {{ page.column_3 }}
        </div>
      </div>
    </div>
  </div>
</div>
