{% extends 'layouts/' + layout + '.html' %}
{% import 'components/avatar.html' as avatar %}

{% block pageHeader %}

  {% if page_header_dropdown === false and not new_button_label %}

  <div class="{{ containerClass }} page-section pb-0">
    <h1 class="h2 mb-0">{{ title }}</h1>
    {% if breadcrumb %}
    <ol class="breadcrumb p-0 m-0">
      <li class="breadcrumb-item"><a href="index.html">Home</a></li>
      {% for item in breadcrumb %}
      <li class="breadcrumb-item{% if loop.last %} active{% endif %}">
        {% if loop.last %}
          {{ item.title }}
        {% else %}
          <a href="{{ item.slug }}">{{ item.title }}</a>
        {% endif %}
      </li>
      {% endfor %}
    </ol>
    {% endif %}
  </div>

  {% else %}

  <div class="border-bottom-2 py-32pt position-relative z-1">
    <div class="{{ containerClass }} d-flex flex-column flex-md-row align-items-center text-center text-sm-left">
      <div class="flex d-flex flex-column flex-sm-row align-items-center{% if new_button_label %} mb-24pt mb-md-0{% endif %}">

        <div class="mb-24pt mb-sm-0 mr-sm-24pt">
          <h2 class="mb-0">{{ title }}</h2>
          
          {% if breadcrumb %}
          <ol class="breadcrumb p-0 m-0">
            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
            {% for item in breadcrumb %}
            <li class="breadcrumb-item{% if loop.last %} active{% endif %}">
              {% if loop.last %}
                {{ item.title }}
              {% else %}
                <a href="{{ item.slug }}">{{ item.title }}</a>
              {% endif %}
            </li>
            {% endfor %}
          </ol>
          {% endif %}
        </div>

        {% if page_header_dropdown !== false %}
        <div class="dropdown">
          <a href="" class="border rounded d-flex align-items-center p-16pt" data-toggle="dropdown" data-caret="false">
            {{ avatar.component(title='FM', size='sm', class='mr-8pt', title_class='bg-primary', circle=false) }}
            <small class="ml-4pt flex">
              <span class="d-flex align-items-center">
                <span class="flex d-flex flex-column">
                  <strong class="text-100">FrontendMatter Inc.</strong>
                  <span class="text-50">Select company</span>
                </span>
                <i class="material-icons icon-16pt text-50 ml-4pt">arrow_drop_down</i>
              </span>
            </small>
          </a>
          <div class="dropdown-menu w-100">
            <div class="dropdown-header"><strong>Select company</strong></div>
            <a href="" class="dropdown-item active d-flex align-items-center">
              {{ avatar.component(title='FM', size='sm', class='mr-8pt', title_class='bg-primary', circle=false) }}
              <small class="ml-4pt flex">
                <span class="d-flex flex-column">
                  <strong class="text-black-100">FrontendMatter Inc.</strong>
                  <span class="text-black-50">Administrator</span>
                </span>
              </small>
            </a>
            <a href="" class="dropdown-item d-flex align-items-center">
              {{ avatar.component(title='HH', size='sm', class='mr-8pt', title_class='bg-accent', circle=false) }}
              <small class="ml-4pt flex">
                <span class="d-flex flex-column">
                  <strong class="text-black-100">HumaHuma Inc.</strong>
                  <span class="text-black-50">Publisher</span>
                </span>
              </small>
            </a>
          </div>
        </div>
        {% endif %}
      </div>

      {% if new_button_label %}
      <div class="row" role="tablist">
        <div class="col-auto d-flex flex-column">
          <h6 class="m-0">&dollar;12.3k</h6>
          <p class="text-50 mb-0 d-flex align-items-center">
            Earnings
            <i class="material-icons text-accent ml-4pt icon-16pt">keyboard_arrow_up</i>
          </p>
        </div>
        <div class="col-auto border-left">
          <h6 class="m-0">264</h6>
          <p class="text-50 mb-0 d-flex align-items-center">
            Sales
            <i class="material-icons text-accent ml-4pt icon-16pt">keyboard_arrow_up</i>
          </p>
        </div>
        <div class="col-auto border-left">
          <a href="{% if new_button_slug %}{{ prefix or '' }}{{ new_button_slug }}.html{% endif %}" class="btn btn-accent">{{ new_button_label }}</a>
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  {% endif %}
{% endblock %}