<div class="menu-element gogo-bg-soft-color-as {{pendingClass}} gogo-section-infobar-menu" 
     option-id={{element.colorOptionId}}>  
  
  {% if config.isFeatureAvailable('favorite') %} 
    <div class="menu-element-item gogo-color-link item-add-favorite">
      <span class="menu-icon gogo-icon-star-empty small-icon tooltipped" 
      data-position="top" data-delay="0" data-tooltip="{{ 'save.as.favorites' | i18n }}"></span>
      <span class="menu-element-item-text">{{ 'save' | i18n }}</span>
    </div>
    <div class="menu-element-item gogo-color-link item-remove-favorite" style="display:none">
      <span class="menu-icon gogo-icon-star-full small-icon tooltipped"
      data-position="top" data-delay="0" data-tooltip="{{ 'remove.from.favorites' | i18n }}"></span>
      <span class="menu-element-item-text favorite">{{ 'saved' | i18n }}</span>
    </div>
  {% endif %}

  {% if config.isFeatureAvailable('stamp') %}
    {% for stamp in allowedStamps %}
      <div class="menu-element-item gogo-color-link item-stamp" data-stamp-id="{{ stamp.id }}" data-element-id="{{ element.id }}">
        <span class="menu-icon {{ stamp.icon }} small-icon tooltipped" 
        data-position="top" data-delay="0" data-tooltip="{{ 'label' | i18n}} {{ stamp.name }}"></span>
        <span class="menu-element-item-text">{{ stamp.name }}</span>
      </div>
    {% endfor %}
  {% endif %}

  {% if not isMapMode %}
    <div class="menu-element-item gogo-color-link item-show-on-map"> 
      <span class="menu-icon gogo-icon-locate tooltipped" 
      data-position="top" data-delay="0" data-tooltip="{{ 'show.on.map' |i18n }}"></span>
      <span class="menu-element-item-text">{{ 'see.on.map' |i18n }}</span>
    </div>     
  {% endif %}

  {% if config.isFeatureAvailable('share') %} 
    <div class="menu-element-item gogo-color-link item-share-url">
      <span class="menu-icon gogo-icon-share-alt tooltipped"
      data-position="top" data-delay="0" data-tooltip="{{ 'share.url' | i18n }}"></span>
      <span class="menu-element-item-text">{{ 'share.url' | i18n }}</span>
    </div>
  {% endif %}
  
  {% if config.isFeatureAvailable('subscribe') %} 
    {% set subscribed = false %}
    {% if element.subscriberEmails|length > 0 and config.security.userEmail in element.subscriberEmails %}
      {% set subscribed = true %}
    {% endif %}
    {% import 'components/spinner-loader.html.njk' as spinnerLoader%}
    <div class="menu-element-item gogo-color-link item-subscribe-element {% if subscribed %} hidden {% endif %}">
      <span class="menu-icon gogo-icon-rss tooltipped"
      data-position="top" data-delay="0" data-tooltip="{{ 'subscribe.changes' | i18n }}"></span>
      {{ spinnerLoader.create('subscriber-loader') }}
      <span class="menu-element-item-text">{{ 'subscribe.changes' | i18n }}</span>
    </div>
    <div class="menu-element-item gogo-color-link item-unsubscribe-element {% if not subscribed %} hidden {% endif %}">
      <span class="menu-icon gogo-icon-rss tooltipped"
      data-position="top" data-delay="0" data-tooltip="{{ 'subscribed' | i18n }}"></span>
      {{ spinnerLoader.create('unsubscriber-loader') }}
      <span class="menu-element-item-text">{{ 'subscribed' | i18n }}</span>
    </div>
  {% endif %}

  {% set readonlySources = config.features.edit.options.readonlySources %}
  {% if config.isFeatureAvailable('edit') 
        and (not element.isPending or config.isFeatureAvailable('directModeration')) 
        and (not readonlySources or not (element.sourceKey in readonlySources)) %} 
    <div class="menu-element-item gogo-color-link item-edit">
      {% set editText = 'edit' if config.isFeatureAvailable('directModeration') else 'propose.changes' %}
      <a href={{ editUrl }} {% if isIframe %}target="_blank"{% endif %} {% if not element.isFullyEditable %} class="disabled" {% endif %}>
      <span class="menu-icon gogo-icon-edit tooltipped" 
      data-position="top" data-delay="0" data-tooltip="{{ editText|i18n }}"></span>
      <span class="menu-element-item-text">{{ editText|i18n }}</span></a>
    </div>
  {% endif %}

  {% if config.isFeatureAvailable('report') and not element.isPending %} 
    <div class="menu-element-item gogo-color-link item-report"> 
      <span class="menu-icon btn-report gogo-icon-exclamation-1 tooltipped" 
      data-position="top" data-delay="0" data-tooltip="{{ 'report.error' | i18n }}"></span>
      <span class="menu-element-item-text">{{ 'report.error' | i18n }}</span>
    </div>
  {% endif %}     

  {% if config.isFeatureAvailable('delete') and element.status != ElementStatus.PendingAdd %} 
    <div class="menu-element-item gogo-color-link item-delete"> 
      <span class="menu-icon btn-delete gogo-icon-delete tooltipped" 
      data-position="top" data-delay="0" data-tooltip="{{ 'delete' | i18n }}"></span>
      <span class="menu-element-item-text">{{ 'delete' | i18n }}</span>
    </div>  
  {% endif %}     
</div>