{% extends 'base.html.twig' %}

{% trans_default_domain "community" %}

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

{% block schemaBlock %}

<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "QAPage",
            "mainEntity": {
                "@type": "Question",
                "name": "{{ question.question }}",
                "text": "",
                "answerCount": "{{communityQuestionDiscussionsCount}}",
                "datePublished": "{{ question.createdAt | date() }}",
                "author": {
                    "@type": "Person",
                    "name": "{{ question.createdBy.firstName ~ " " ~ question.createdBy.lastName }}",
                    "email": "{{ question.createdBy.email }}"
                },
               "suggestedAnswer": [
                    {% for communityQuestiondiscussion in communityQuestionDiscussions %}
                         {
                              "@type": "Answer",
                              "text": "{{  (communityQuestiondiscussion.content) }}",
                              "datePublished": "{{ communityQuestiondiscussion.createdAt | date() }}",
                              "author": {
                                   "@type": "Person",
                                   "name": "{{ communityQuestiondiscussion.createdBy.firstName ~ ' ' ~ communityQuestiondiscussion.createdBy.lastName }}",
                                   "email": "{{ communityQuestiondiscussion.createdBy.email }}"
                              }
                         }
                         
                         {{ loop.last ?'': ',' }}
                    {% endfor %}
               ]
            }
        }
</script>
{% endblock %}

{% block og_title %} {{question.question}} {% endblock %}
{# {% block og_description %}{{(question.content)}}{% endblock %} #}
{% block og_url %}{{path('show_community_question' , {'alias':community.alias,'slug':question.slug} ) }}{% endblock %}
{% block og_image %} {{ asset(community.assetDir ~ '/' ~ community.coverImage) }} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/community.css?v2.6') }}"/>
{% endblock %}

{% if question.createdBy.image == "default_profile_pic_m.png" or question.createdBy.image == "default_profile_pic_f.png" %}
    {% set getWebPath = "/bundles/user/img/" %}
{% else %}
    {% set getWebPath = "/uploads/profile/img" %}
{% endif %}
{% block body %}
     <link rel="amphtml" href="{{path('show_community_question_amp',{'alias':community.alias,'slug':question.slug})}}">
     <div class="container">
          {{ include('community/header.html.twig') }}
          <div class="container">
               <div class="row">
                    <div class="col-xs-12 col-md-7 block">
                         <div class="question-header">
                              <div style="color: #00A550;">
                                   <h3> {{ question.question|raw }} </h3>
                              </div>
                              <div class="additionalInfo">
                                   <span title="{{ 'userProfile.research.views'|trans({},'Academia') }}" data-toggle="tooltip"><i class="fa fa-eye academia-icon"></i> {{  question.views }} &nbsp;</span>-
                                   <span title="{{ 'question.date'|trans({}, 'Academia') }}" data-toggle="tooltip">
                                        <i class="fa fa-clock-o academia-icon" ></i>
                                        <time datetime="{{question.createdAt|date('Y-m-d H:i:s') }}">{{question.createdAt|date('Y-m-d') }}</time>
                                   </span>
                                   <span  data-toggle="tooltip">
                                        <img src="{{getWebPath}}/{{question.createdBy.image}}" alt="{{ question.createdBy.firstName }}"class="img-circle " align="middle" width="20" height="20">
                                        {% 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>
                                   {% if app.user is not null and (community.createdBy == app.user or question.createdBy == app.user or is_granted("ROLE_G1") ) %}
                                        <button
                                             id="delete-post"  
                                             data-href="{{path('delete_community_question',{'alias':community.alias,'slug':question.slug})}}" 
                                             class="btn btn-danger block-5"
                                        > 
                                        {{'community.question.delete'|trans}}
                                        </button>
                                        {% if question.createdBy == app.user or is_granted("ROLE_G1") %}
                                             <button
                                                  id="edit-post"  
                                                  data-href="{{path('edit_community_question',{'alias':community.alias,'slug':question.slug})}}" 
                                                  class="btn keyword block-5"
                                             > 
                                                  <i class="fa fa-gear"data-placement="top" data-toggle="tooltip" ></i>
                                             </button> 
                                        {% endif %}
                                   {% endif %}
                              </div>
                         </div>
                         <div>
                              {% for keyword in question.keywords %}
                                   <span class="keyword keyword-show-all"> {{keyword.context}} </span>
                              {% endfor %}
                         </div>
                         <hr style="margin-top: 10px;margin-bottom: 10px;color: #fdfdfd">
                         <div class="content content-show scroller" dir="{% if app.request.get("_locale") == "ar" %}rtl{% else %}ltr{% endif %}">
                              {{ (question.content)|raw }}
                         </div>
                         
                         {% if app.user is not null or  question.communityQuestionDiscussions|length > 0 %}
                              <div class="event-header border">
                                   <center><h4>{{ 'community.question.comments'|trans }}</h4></center>
                              </div>
                         {% endif %}
                         {% if app.user is not null %}
                              <div >
                                   <button id="show-dis-form" class="btn" style="background: #ff8600; margin:15px;" onclick="toggleNewDisForm()"> 
                                        <i class="fa fa-plus"></i> {{ "form.post-dis"|trans }}
                                   </button>
                              </div>
                              <div id="new-dis-form" style="display:none;">
                                   {% include 'community/discussion_form.html.twig' with {'form':form, 'alias':community.alias, 'slug':question.slug} %}
                              </div>
                         {% endif %}
                         {% if communityQuestionDiscussions|length > 0 %}
                              <div class="block">
                                   {% for communityQuestiondiscussion in communityQuestionDiscussions %}
                                        <div class="block" >
                                             {% include 'community/discussion.html.twig' with {'discussion':communityQuestiondiscussion, 'alias':community.alias, 'slug':question.slug} %}
                                        </div>
                                   {% endfor %}
                                   <center> 
                                        {% include 'community/paginator.html.twig'  with 
                                             {
                                                  'routePageUp': path(route,app.request.query.all|merge({'page' : page + 1, 'alias':community.alias, 'slug':question.slug})) ,
                                                  'routePageZero': path(route,app.request.query.all|merge({'page' : 0, 'alias':community.alias, 'slug':question.slug})) ,
                                                  'routePageDown': path(route,app.request.query.all|merge({'page' : page - 1, 'alias':community.alias, 'slug':question.slug})),
                                                  'routePageLast': path(route,app.request.query.all|merge({'page' : (( communityQuestionDiscussionsCount / numberOfDiscussionResults) |round(0,'ceil')) - 1 , 'alias':community.alias, 'slug':question.slug})),
                                                  'lastPage': (( communityQuestionDiscussionsCount / numberOfDiscussionResults) |round(0,'ceil')) - 1,
                                                  'page': page,
                                                  'numberOfResults' : numberOfDiscussionResults, 
                                                  'results': communityQuestionDiscussions 
                                             } 
                                        %}
                                   </center>
                              </div>
                         {% endif %}
                    </div>
               </div>
          </div>
     </div>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    {% if not userman.has_subscribtion() %}
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3326822702504482" crossorigin="anonymous"></script>
    {% endif %}
<script>
    
    $('.ql-editor').html($('#community_discussion_form_content').val())

    $(document).ready(function () {
        const editor = new Quill('#q-editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, 4] }],                       // custom button values
                    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link','blockquote', 'code-block'],
                    [{ 'direction': 'rtl' }],                           // text direction
                    [{ 'align': ['','center','right','justify']}],
                    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                    ['clean'],
                ]
            },
            placeholder: "{{ 'form.discussion.placeholder'|trans }}"
        });
        
        editor.format('align', 'right');

        document.getElementById("post-button").addEventListener('click', function() {
                $('#community-question-discussion-form').submit(function (e) {
                $('#community_discussion_form_content').val(
                    $("#q-editor .ql-editor").html()
                );
                return true;
            });
        });

     {% if app.user is not null and (community.createdBy == app.user or question.createdBy == app.user or is_granted("ROLE_G1") )  %}
               document.getElementById("delete-post").addEventListener('click', function() {
                         {% if question.communityQuestionDiscussions|length > 0 %}
                              var check = confirm("{{'form.delete-post.alert'|trans}}");
                         {% else %}
                              var check = true;
                         {% endif %}     
                         if(check != null && check){
                              window.location = $(this).data("href");
                         }
               });
          {% if question.createdBy == app.user or is_granted("ROLE_G1") %}
               document.getElementById("edit-post").addEventListener('click', function() {
                    window.location = $(this).data("href");
               });
          {% endif %}
     {% endif %}

        setInterval(function (){$('time').each(function (index) {
            var eventDate=moment($(this).attr('datetime')).add(defTime1);
            eventDate.locale('{{ app.request.locale }}')
            $(this).text(moment.min(eventDate,moment()).fromNow());
        })},3000)

        $('.ql-align-right').attr('dir','rtl')
        $('.ql-direction-rtl').attr('dir','rtl')


    });
    </script>

    <script>
          function toggleNewDisForm(){
               var postForm = document.getElementById("new-dis-form");
               var showFormButton = document.getElementById("show-dis-form");
               if(postForm.style.display == "none"){
                    postForm.style.display = "block";
                    showFormButton.innerHTML = '{{ "form.hide"|trans }}'
               }else{
                    postForm.style.display = "none";
                    showFormButton.innerHTML = '<i class="fa fa-plus"></i> {{ "form.post-dis"|trans }}'  
               }
          }
    </script>
{% endblock %}