{% extends 'ampbase.html.twig' %}
{% trans_default_domain "community" %}

{% block links %}
    <link rel="canonical" href="{{ path('show_community_question',{'alias':community.alias,'slug': question.slug}) }}">
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
{% endblock %}

{% block title %}{{  question.question }}{% endblock %}


{% block body %}
  <!-- Start Fullpage Hero -->
  <figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <h2 style="margin-top:0">
      {{ question.question }}
    </h2>

    {# here will be the meta data #}
    <div>
      <span class="metadata-item tooltip"  data-tooltip-position="bottom">
        <i class="fa fa-eye academia-icon" style="color: #ff8600"></i> : {{ question.views }}
      </span>
      <span class="metadata-item">
        <i class="fa fa-comment academia-icon" style="color: #ff8600"></i> :  {{  question.communityQuestionDiscussions|length }} 
      </span>
      <span class="metadata-item">
        <i class="fa fa-calendar" style="color: #ff8600"></i> : {{ question.createdAt|date('Y-m-d') }}
      </span>
      <span class="metadata-item">
        <i class="fa fa-user-circle" style="color: #ff8600"></i> : 
        {% if app.request.locale == 'ar' %}
                {% if question.createdBy.gender =='m' %}{{ 'طرح' }}{% else %}{{ 'طرحت' }}{% endif %}
                <a href="{{ path('user_profile_show',{'username':question.createdBy.username}) }}" style="color: #00A550;" >{{ question.createdBy.firstName ~ ' ' ~ question.createdBy.lastName }}</a>
        {% else %}
                <a href="{{ path('user_profile_show',{'username':question.createdBy.username}) }}" style="color: #00A550;" >{{ question.createdBy.firstName ~ ' ' ~ question.createdBy.lastName }}</a>
                {{ 'asked' }}    
        {% endif %}                
        &nbsp;
      </span>
    </div>
    <hr>
    <p class="abstract-box">
        {{ (question.content)|raw }}
    </p>    
  </figure>
  
    {% if question.communityQuestionDiscussions|length > 0 %}
        <figure class="ampstart-image-fullpage-hero m0 relative mb4">
            <div class="">
                <h3>{{ 'community.question.comments'|trans }}</h3>
            </div>
            {% for communityQuestiondiscussion in question.communityQuestionDiscussions %}
                {% include 'community/amp/discussion.html.twig' with {'discussion':communityQuestiondiscussion, 'alias':community.alias, 'slug':question.slug} %}
            {% endfor %}
        </figure>
    {% endif %}

{% endblock %}