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

{% trans_default_domain "community" %}

{% block title %}
 {{ 'header.communities'|trans({}, 'UserBundle') }}
{% endblock %}

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

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col col-md-12">
                <div class="col col-md-10">
                    <div class="alert alert-info alert-dismissible"  role="alert">
                        <h4>
                            {{'community.new'|trans}}
                        </h4>
                    </div>
                </div>
                 <div class="col col-md-2">
                    <a  class="btn"
                        style="background: #ff8600;color: #fff; margin-top: 10%;"
                        href="{{ path('create_community') }}">
                            <i class="fa fa-plus">
                            </i>
                            {{ 'page.title.new-community'|trans({}, 'Academia') }}
                    </a>
                </div>
            </div>
        <div class="row">
            <div class="col-md-12">
                {% if topCommunities|length > 0 %}
                    <div class="col-md-4">
                        <div class="event-header block">
                                <center> 
                                        <h4>
                                        {{ 'community.suggested-community'|trans }} 
                                        </h4>
                                </center>
                        </div>
                        <div class="community-container block" >
                            {% for community in topCommunities %}
                                <a style="text-decoration:none" href="{{ path('show_community',{'alias':community.alias}) }}"> 
                                    {% include 'community/community.html.twig' with {'community':community, 'request':false, 'follow':true, 'lastOne': loop.index == topCommunities|length} %}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                <div class="col-md-8">
                    <div class="event-header block">
                        <center> 
                                <h4>
                                {{ 'community.feeds'|trans }} 
                                </h4>
                        </center>
                    </div>
                    <div class="community-container block" >
                        {% for question in feeds|slice(0,20) %}
                            <div class="feed padding-5 border-bottom">
                                {% include 'community/question.html.twig' with {'question':question, 'alias':question.community.alias, 'publishin':true } %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% 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>
        $(document).on('click',".q-show-more a",function (e) {
            e.preventDefault()
            var thisObj=$(this)
            var abstractObj=(thisObj).closest('.content')
            
            var halfObj=$(abstractObj).find('.question-content')

            if($(halfObj).hasClass('q-hidden')){
                    $(halfObj).removeClass('q-hidden')
                    $(thisObj).text("{{'less'|trans}}")
            }
            else{
                    $(halfObj).addClass('q-hidden')
                    $(thisObj).text("{{'more'|trans}}")
            }
        })
        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)

        $(".question-header").click(function(){
            window.location = $(this).data("location");
        })

    </script>

{% endblock %}