{#
/**
 * @file
 * Default theme implementation to display branch contacts info.
 *
 * Available variables:
 * - node_bundle: will return node bundle
 * - branch_title: will return branch title
 * - openy_branch_selector: will return rendered branch selector code
 * - phone: will return branch phone number
 * - fax: will return branch fax number
 * - email: will return branch email
 * - address_title: will return formatted branch address string
 * - directions_url: will return link to Google Maps linked to location address
 * - branch_hours: will return rendered branch hours widget
 * - directions_field_url: will return directiods field url
 * - directions_field_title: will return directiods field title
 *
 * @ingroup themeable
 */
#}
{% set classes_header = [
  'node--type-' ~ node_bundle|clean_class,
  'branch-header',
  'location-camp-header',
] %}

<article{{ attributes.addClass(classes_header) }}>
  <div class="hidden-xs desktop">
    <section class="masthead location-masthead">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12 back-link">
            {# @todo move this url out of the template #}
            {{ link('Back to All Locations', 'internal:/locations' ) }}
          </div>
        </div>
        <div class="row">
          <div class="col-sm-8">
            <span class="masthead-brand">{{ branch_title }}</span>
          </div>
        </div>
      </div>
    </section>
    <div class="location-details masthead-menu">
      <div class="container-fluid">
        <div class="row directions-hours" id="directions-hours">
          <div class="directions-hours-inner">
            <div class="col-sm-3 col-md-2 phone clearfix">
              <span class="tel">
                <span class="glyphicon glyphicon-earphone bullet"></span>
                <a href="tel:{{ phone }}">{{ phone }}</a>
              </span>
              {% if fax is not empty %}
                <span class="tel">
                  <span class="glyphicon glyphicon-phone-alt"></span>
                  <a href="tel:{{ fax }}">{{ fax }}</a> ({{ 'fax'|t }})
                </span>
              {% endif %}
              {% if email is not empty %}
                <span class="email">
                    <span class="glyphicon glyphicon-envelope bullet"></span>
                    <a href="mailto:{{ email }}">{{ email }}</a>
                </span>
              {% endif %}
            </div>
            <div class="col-lg-6 col-sm-5 col-md-6 address clearfix">
              {% if address_title is not empty %}
                <span class="glyphicon glyphicon-map-marker bullet"></span>
                <span class="plaintext">
                  {{ address_title|striptags }}
                </span>
                <a class="directions" target="_blank" href="{{ directions_url }}">
                  {{ directions_field_title }}
                  <span class="glyphicon glyphicon-share"></span>
                </a>
              {% endif %}
            </div>
            <div class="hours col-lg-4 col-md-4 col-sm-4 clearfix">
              {% if node_bundle == 'branch' %}
                <span class="glyphicon glyphicon-time bullet"></span>
                <span>{{ 'Today'|t }}:</span>{{ branch_hours }}
              {% else %}
                <a data-toggle="collapse" href="#camp-address" class="camp-address-toggle">
                  {{ 'Camp Office'|t }}
                  <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
                <div id="camp-address" class="camp-address all-hours collapse">
                  {{ address_title|striptags }}
                  <a href="tel:{{ phone }}">{{ phone }}</a>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden-sm hidden-md hidden-lg mobile">
    <div class="masthead location-masthead">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 back-link">
            {# @todo move this url out of the template #}
            {{ link('Back to All Locations', 'internal:/locations' ) }}
          </div>
        </div>
        <div class="row">
          <div class="col-sm-8">
            <span class="masthead-brand">{{ branch_title }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="location-details masthead-menu">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <button type="button" class="btn btn-link location-hours-toggle" data-toggle="collapse"
                    data-target="#directions-hours-mobile">
              <span class="glyphicon glyphicon-chevron-down pull-right"></span>
              {% if node_bundle == 'branch' %}
                {{ 'Phone, Address and Hours'|t }}
              {% else %}
                {{ 'Phone and Address'|t }}
              {% endif %}
            </button>
          </div>
        </div>
        <div class="row collapse directions-hours" id="directions-hours-mobile">
          <div class="directions-hours-inner">
            <div class="col-sm-3 col-md-2 phone clearfix">
              <span class="tel">
                <span class="glyphicon glyphicon-earphone"></span>
                <a href="tel:{{ phone }}">{{ phone }}</a>
              </span>
              {% if fax %}
                <span class="tel">
                  <span class="glyphicon glyphicon-phone-alt"></span>
                  <a href="tel:{{ fax }}">{{ fax }}</a>
                </span>
              {% endif %}
              {% if content.field_location_email|render|trim is not empty %}
                <span class="email">
                  <span class="glyphicon glyphicon-envelope"></span>
                  <a href="mailto:{{ email }}">{{ email }}</a>
                </span>
              {% endif %}
            </div>
            <hr>
            <div class="col-lg-6 col-sm-5 col-md-6 address clearfix">
              {% if address_title is not empty %}
                <span class="glyphicon glyphicon-map-marker bullet"></span>
                <span class="plaintext">
                  {{ address_title|striptags }}
                </span>
                <br>
                <a class="directions" target="_blank" href="{{ directions_url }}">
                  {{ directions_field_title }}
                  <span class="glyphicon glyphicon-share"></span>
                </a>
              {% endif %}
            </div>
            <hr>
            <div class="hours col-lg-4 col-md-4 col-sm-4 clearfix">
              {% if node_bundle == 'branch' %}
                <span class="glyphicon glyphicon-time bullet"></span>
                <span>{{ 'Today'|t }}:</span>{{ branch_hours }}
              {% else %}
                <div id="camp-address" class="camp-address all-hours">
                  {{ address_title|striptags }}
                  <a href="tel:{{ phone }}">{{ phone }}</a>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>
