<!-- ARTICLE METADATA -->

<div class="wl-tab-lead">
  <div class="wl-tab-lead-wrap" ng-click="toggleCurrentSection('article-metadata')">
    <h1 class="wl-tab-lead-text">
      Article metadata
		</h1>
    <!-- isGeolocationRunning can be used to show/hide a loader whene geolcation is running -->
    <div class="wl-tab-lead-text wl-tab-lead-btn"
      ng-class="{ 'wl-open' : isCurrentSection('article-metadata'), 'wl-close' : !isCurrentSection('article-metadata') }">
      <!-- display a triangle -->
    </div>
  </div>
</div>

<div
  class="wl-widget-article-metadata wl-tab-wrap"
  ng-show="isCurrentSection('article-metadata')">

  <div class="wl-widget-article-metadata-wrap">

    <!-- TOP SECTION -->
    <div class="wl-widget-article-metadata-top">

      <!-- AUTHOR -->
      <div class="wl-widget-article-metadata-author">
        <img ng-src="{{configuration.defaultWordLiftPath}}images/svg/wl-author-icon.svg">
        <p>
          {{configuration.currentUser}}
        </p>
      </div>

      <!-- LOCATION -->
      <div class="wl-widget-article-metadata-location" ng-show="isGeoLocationAllowed()">
        <img ng-src="{{configuration.defaultWordLiftPath}}images/svg/wl-location-icon.svg">
        <p 
          ng-click="onPublishedPlaceSelected(publishedPlace)"
          ng-show="hasPublishedPlace()">
          {{publishedPlace.label}} 
        </p>
        <p 
          class="wl-get-location"
          ng-click="getLocation()"
          ng-hide="hasPublishedPlace()">
          Get Location
        <p>
      </div>

      <!-- DATE -->
      <div class="wl-widget-article-metadata-date">
        <img ng-src="{{configuration.defaultWordLiftPath}}images/svg/wl-calendar-icon.svg">
        <p>
          {{configuration.publishedDate}}
        </p>
      </div>

    </div>

  </div>
</div>
