<div class="interactive-section">
  {% if element.isPending %}
    <div class="vote-section">
      <span class="basic-message">
        <span class="gogo-icon-attention"></span>
        {% set voteEnabled = config.isFeatureAvailable('vote') or config.isFeatureActivated('vote') and config.features.vote.hasRole('user') %}
        {% set class = 'validation-process-info' if voteEnabled else '' %}
        <span class="text pending-text {{ class }}" >
          <span class="long-text">{{ 'new'|i18n ~ ' ' ~ 'element'|i18n if element.status == ElementStatus.PendingAdd else 'modification.plural'|i18n }}</span>
          {{ 'pending.validation'|i18n }}
        </span>
        {% set isAdmin = config.isFeatureAvailable('directModeration') %}
        {# Display vote button it can it's available for user, and instead javascript component will open login modal #}
        {% if voteEnabled or isAdmin %}
          <span class="vote-button btn action-btn waves-effect waves-light">{{ 'decide'|i18n if isAdmin else 'vote'|i18n }}</span>
          {% endif %}
      </span>
    </div>
  {% endif %}

  {% set moderationStates = {
    '-2':'geolocation.error',
    '-1':'no.category.provided',
    '0':'no.moderation.necessary',
    '1':'errors.reported',
    '2':'non.consensual.votes',
    '3':'pending.for.too.long',
    '4':'potential.duplicate'
    }
  %}

  {% if element.needsModeration and config.isFeatureAvailable('moderation') %}
    <div class="moderation-section">
      <span class="basic-message">
        <span class="gogo-icon-moderation"></span>
        <span class="text">{{ moderationStates[element.moderationState]|i18n }}</span>
        {% if config.isFeatureAvailable('directModeration') %}
          {% if element.moderationState in [ElementModerationState.ReportsSubmitted, ElementModerationState.PossibleDuplicate]  %}
            <span class="mark-as-moderated-btn btn action-btn waves-effect waves-light">{{ 'mark.as.resolved'|i18n }}</span>
            <input type="text" class="moderation-input-comment" placeholder="{{ 'comment.for.moderation'|i18n }}"/>
          {% endif %}
        {% endif %}
      </span>
    </div>
  {% endif %}

  {# div used to show the reponse message from API actions #}
  <div class="result-message" style="display:none"></div>

</div>