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

{% trans_default_domain "community" %}

{% block title %}
 {{ 'title.add'|trans({'community':app.request.locale == "ar" ? community.title:community.englishTitle}) }}
{% endblock %} 


{% block stylesheets %}
    {{ parent() }}
    {# progress bar setting #}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/new.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/community.css?v2.6') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
{% endblock %}

 {% block body %}
  {{ include('@syndexAcademic/Default/header.html.twig') }}
  <div class="container p-5">
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new"  class="col-xs-12 col-md-6 shadow">
                <center> 
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="2">2/2</div>
                    </div>
                </center>
                <div id="page-header" class="new-research-header">
                    <span><i class="fa fa-plus"></i>&nbsp;   {{ 'title.add'|trans({'community':app.request.locale == "ar" ? community.title:community.englishTitle}) }}</span>
                </div>
                <br>
                {% include 'community/add_user_form.html.twig' with {'form':form, 'formName':'form', 'hidden':false, 'route':route, 'userType': "suggest" } %}
        </div>
    </div>
</div>
 {% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        var pageNumber = $(".progress-bar").attr("aria-valuenow") == ""?0:parseInt($(".progress-bar").attr("aria-valuenow"));
        var numberOfPages =  parseInt( $(".progress-bar").attr("aria-valuemax") )
        $(".progress-bar").css("width", (pageNumber/numberOfPages)*100 + "%");
    </script>
{% endblock %}