{% set source_lang = supported_languages["ar"] %}
{% set target_lang = supported_languages["en"] %}

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

{% trans_default_domain "ShamraTranslation" %}

{% block title %}{{ 'main.title'|trans }}{% endblock %}

{% block stylesheets %}

    {{parent()}}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/shamra_ocr.css') }}"/>
	<link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/translation_styles.css') }}?v=0.3"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/toastmaker.min.css') }}"/>



{% endblock %}

{% block body %}
    <div class="container">
        <div style="display:flex;flex-wrap: wrap;">
            <h1 style="flex-grow:1">{{ 'main.title'|trans }}</h1>
            
            {# <div class="col-xs-12 col-md-2 col-md-offset-1" >
                <a id="add-btn" class="new-button  btn" style="min-width:200px;" href="{{ path('promo_index') }}">
                    {{'question'| trans({},'Promo')}}
                </a>
            </div>  #}
        </div> 
        
        <div class="well">
            {{ 'main.discription'|trans }}
        </div>

        <hr style="margin-top: 10px;">

        <div id="content" class="row-fluid row-table content-panel ">

                <div  id="source-translation-container" class="col-md-5 col-table-cell translationContainer sourceText">

                    <div id="source-panel" class="translation-panel source-panel" >
                        <span id="clear-source-text" class="control-item  responsive-button stateEnabled"><i class="fa fa-eraser" data-toggle="tooltip" title="{{ 'main.buttons.clear'|trans}}"></i> </span>
                        <span id="copy-source-text"  class="control-item responsive-button stateEnabled"><i class="fa fa-copy" data-toggle="tooltip"   title="{{ 'main.buttons.copy'|trans}}"></i> </span>
                        <div class="dropdown" style="float: inline-end;">
                            <a href="#" class="dropdown-toggle" id="commentDropdown" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="true">
                                <span id="source-lang" lang-code="{{ source_lang["code"] }}" style="float: inline-start" class="control-language-button" >
                                    {{ ("langs."~source_lang["code"]) | trans}}
                                </span>
                                <span class="caret"></span>
                            </a>
                            <ul id="source_supported_languages_menu"class="dropdown-menu dropdown-menu-translation" role="menu" aria-labelledby="languageIcon" style="width: 100%;">
                            </ul>
						</div>
                        <br/>
                    </div>

                    {#In the following block, I firstly set the direction of the text based on the language. we are sending a variable (is rtl)#}
                    {#with each language.#}
                    {#Then, I set the placeholder text based on the language too. We should modify the translations file, and add the variable#}
                    {#enter_text_LANGUAGE replacing LANGUAGE with the language code, for each language.#}
                    {#for example, if language is en (english), we will search the file for controlPanel.enter_text_en.#}
                    {#if not found, we use the arabic place holderinstead.#}

                    {% set style_src = "direction:"~source_lang["dir"]~";" %}

                    <div class="textareaWrapper">
                        {#<div style="overflow: auto;" >#}
                        {#<div id="source-text-area-div" class="highlighter adaptable-textarea" style="position: absolute;{{ style_src }} !important;white-space: pre-wrap;word-wrap: break-word;color: transparent"></div>#}
                        {#</div>#}
                        {#<textarea  class="srcTextArea adaptable-textarea" style="position: relative !important;background-color: transparent;margin: 0;border-radius: 0;" id="source-text-area" maxlength="5000" style="{{ style_src }}"#}
                                {#placeholder= "{{ placeHolder }}" ></textarea>#}
                        <div id="source-text-area" class="srcTextArea adaptable-textarea" placeholder= "{{ "main.sourceTextPlaceHolder" | trans}}" style="{{ style_src }}" contenteditable maxlength="1000"></div>
                    </div>
                    <div id="source-counter" class="translation-footer">
                        1000
                    </div>
                </div>


                <div class="col-md-2 col-table-cell panels-spacer">
                    <div id="panels-spacer-row" class="row panels-spacer-row">

                        <div id="swap-button-container" class="col-xs-4 col-md-12 button-container" >
                            <div id="swap-button-rotator" class="swap-button button" style="">
                                <i  id="swap-button-icon" class="fa button fa-exchange"  title="{{ 'main.buttons.swap'|trans}}"></i>
                            </div>
                        </div>

                        <div id="translate-button-container" class="col-xs-4 col-md-12 button-container">
                            <div id="translate-button" class="translate-button button">
                                {{ 'main.buttons.translate'|trans}}
                            </div>
                        </div>

                        <div id="loader" style="display:none;text-align: center;vertical-align: middle">
                            <div class="loadingio-spinner-dual-ring-fbofjcjq6x4"><div class="ldio-unzl005xvm">
                            <div></div><div><div>
                            </div></div></div></div>
                        </div>


                    </div>
                </div>


                <div  id="target-translation-container" style="background-color: rgba(128, 128, 128, 0.04)" class="col-md-5 col-table-cell translationContainer targetText" >
                    <div id="target-panel" class="translation-panel target-panel" >

                        {#<span id="google-translate" class="control-item responsive-button">#}
                            {#<i class="fa fa-google" data-toggle="tooltip"   title="{{ 'controlPanel.google'|trans}}"></i>#}
                        {#</span>#}

                        <span id="suggest-translation" class="control-item responsive-button stateEnabled">
                            <i class="fa fa-edit" data-toggle="tooltip"   title="{{ 'main.buttons.suggest'|trans}}"></i>
                        </span>

                        <span id="copy-target" class="control-item responsive-button stateEnabled">
                            <i class="fa fa-copy" data-toggle="tooltip"   title="{{ 'main.buttons.copy'|trans}}"></i>
                        </span>

                        
                        <div class="dropdown" style="float: inline-end;">
                            <a href="#" class="dropdown-toggle" id="commentDropdown" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="true">
                                <span id="target-lang" lang-code="{{ target_lang["code"] }}" style="float: inline-start" class="control-language-button" >
                                    {{ ("langs."~target_lang["code"]) | trans}}
                                </span>
                                <span class="caret"></span>
                            </a>
                            <ul id="target_supported_languages_menu"class="dropdown-menu" role="menu" aria-labelledby="languageIcon" style="width: 100%;">
                            </ul>
						</div>
                        <br/>
                    </div>
                    {#In the following block, I set the direction of the text based on the language. we are sending a variable (is rtl)#}
                    {#with each language.#}

                    {% set style_tgt = "direction:"~target_lang["dir"]~";" %}
                    <div  class="textareaWrapper" style="{{ style_tgt }}">
                        <div id="target-text" class="tgtTextArea" id="target-text-area" style="{{ style_tgt }}"></div>
                    </div>
                    {# <div id="target-footer" class="translation-footer target-footer" >
                        <span id="vote-down" class="control-item responsive-button stateEnabled">
                            <i id="vote-down-icon" class="fa fa-thumbs-o-down fa-flip-horizontal" data-toggle="tooltip"   title="{{ 'main.buttons.dislike'|trans}}"></i>
                        </span>
                        <span id="vote-up" class="control-item responsive-button stateEnabled">
                            <i id="vote-up-icon" class="fa fa-thumbs-o-up fa-flip-horizontal" data-toggle="tooltip"   title="{{ 'main.buttons.like'|trans}}"></i>
                        </span>
                    </div> #}
                </div>



            </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{parent()}}
    <script>
        let js_meta_data = {};
        {% for lang in supported_languages%}
            var lang_js = {
                "code":"{{lang['code']}}",
                "title":"{{lang['name']}}",
                "dir":"{{lang['dir']}}",
                "title_translation":"{{ ("langs."~lang["code"]) | trans}}",
            }
            js_meta_data["{{lang['code']}}"] = lang_js;
        {% endfor %}
        console.log(js_meta_data);
    </script>

    {# define all the toasts massage with translation #}
    <script>
        var msg = {
            "too_many_letters" : "{{'toast.too_many_letters' | trans}}",
            "no_letters": "{{'toast.no_letters' | trans}}",
            "usage_exceeded" : "{{'toast.usage_exceeded' | trans}}",
            "must_subscribe":{
                "msg":"{{'toast.must_subscribe' | trans}} <br> {{'toast.must_subscribe_en' | trans}}",
                "link":"{{path('shamra_academia_subscription')}}"
            },
            "error":"{{'toast.error' | trans}}",
        }
    </script>
    {####}
    <script type="text/javascript" src="{{ asset('bundles/user/js/toastmaker.min.js') }}"></script>

    
    <script src="{{ asset('bundles/user/js/translation/translation_menu.js') }}"></script>
    <script src="{{ asset('bundles/user/js/translation/translation_functions.js') }}"></script>
    <script src="{{ asset('bundles/user/js/translation/translation.js') }}"></script>
{% endblock %}