{% set dir = gettext("LTR") %}
{% set direction = "rtl" if dir == "RTL" else "ltr" %}
{% set align = "right" if dir == "RTL" else "left" %}


<style type="text/css">
.results_header {
    font-size:15pt;  
    color:#ff0000;
}

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;
}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFBABA;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

.main_re_item {

   -moz-background-inline-policy: continuous;
    background: none repeat scroll 0 0 #EEFFEE;
    font-family: arial,sans serif;
    padding: 5px;
    width: 90%;
}

.main_re_item_title {
    font-size: 14pt;
    margin: 0;
    text-indent: 0;
    background: none repeat scroll 0 0 #FFDDDD;
    border-bottom: 1px solid #D2B9A6;
    clear: both;
    color: #0000FF;
    font-family: arial,sans serif;
    font-weight: normal;
    line-height: 1.5em;
    padding: 2px 5px;
}

@font-face {
    font-family:'Scheherazade';
    src:url('qrc:/fonts/ScheherazadeRegOT.ttf');
}

@font-face {
    font-family:'me_quran';
    src:url('qrc:/fonts/fonts/me_quran_volt_mark2.ttf');
}

@font-face {
    font-family:'ArabeyesQr';
    src:url('qrc:/fonts/fonts/arabeyes-qr.ttf');
}


.enter{
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: gray;
    direction: rtl;
    font-family: tahoma;
    font-weight: bold;
    width: 220px;
    margin:0;
}

a { 
    color: inherit; 
    text-decoration:none; 
  }

a:hover{color: green;}
.select {
    background: url("../images/select.gif") no-repeat scroll right top transparent;
    color: gray;
    font: 13px/17px tahoma;
    height: 40px;
    overflow: hidden;
    padding: 11px 15px 0 0;
    position: absolute;
    width: 191px;
    text-align:right;
}
.styled{height: 40px;
    margin-right: 3px;
    opacity: 0;
    position: relative;
    width: 130px;
    z-index: 5;}


.main_re_item
{
    background: url("qrc:/resources/back_g.png") repeat scroll 0 0 transparent;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    border:0;
    padding: 5px;
}

.main_re_item_title
{
    background: none repeat scroll 0 0 white;
    border: 1px solid green;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-size: 14pt;
    margin: 0 15px 0 0;
    padding: 6px;
    text-indent: 0;
    box-shadow: 0 0 8px green;
}

.main_aya {
 font-size: 22px;
 word-spacing: 3px;
 line-height: 220%;
 color: #00cc66;
}

.main_translation {
 font-size: 22px;
 word-spacing: 3px;
 line-height: 220%;
 color: #0066cc;
}
 



/* +some fun */



.style2
    {
        width: 293px;
    }
    .style3
    {
        width: 227px;
    }
    .style4
    {
        background-color: #CCCCCC;
    }
    .style5
    {
        width: 293px;
        background-color: #CCCCCC;
    }
    .style6
    {
        width: 227px;
        background-color: #CCCCCC;
    }
    .style7
    {
        background-color: #C0C0C0;
    }
    .style8
    {
        width: 293px;
        background-color: #C0C0C0;
    }
    .style9
    {
        width: 227px;
        background-color: #C0C0C0;
    }
    .xdrops_continer{direction:rtl;}

#suggestions {
    background-color: #ecf7f9;
    margin: 10px 0px 10px 0px;
    padding: 15px 15px 15px 15px;
}

#suggestions a {
    text-decoration: none;
}

#search_words {
    background-color: #ecf7f9;
    margin: 10px 0px 10px 0px;
    padding: 15px 15px 15px 15px;
}

.details_label {
    display: inline;
    font-size: 12px;
    padding: 1px 5px 2px 5px;
    margin: 1px 1px 0px 2px;
}

.word_item {
    margin: 1px 0px 1px 0px;
    padding: 0px 0px 0px 0px;
}

.result_item0 {
    background-color: #EFE;
    margin: 2px 5px 15px 15px;
    padding: 0px 2px 5px 2px;
}

.result_item1 {
    background-color: #DFD;
    margin: 2px 5px 15px 15px;
    padding: 0px 2px 5px 2px;
}

.translation_author, .translation_language {
    background-color: #666;
    color: #FFF;
}


.word_stat0 {
    background-color: #888;
    color: #FFF;
}

.word_stat1 {
    background-color: #555;
    color: #FFF;
}

.word_vocalization_nb {
    background-color: #90A;
    color: #FFF;
}

.word_derivation_nb {
    background-color: #50F;
    color: #FFF;
}

.word_vocalization {
    background-color: #FFF;
    color: #90A;
    /* font-size:100%;*/
}

.item_number {
    background-color: #FFF;
    font-size: 2em;
    font-weight: bold;
    left: -10px;
    padding: 0px 5px 1px 5px;
    position: relative;
    top: -10px;
}

.quran {
    direction: rtl;
    font-family: me_quran, ArabeyesQr, Scheherazade,  KacstBook, KacstQurn,  "KFGQPC Uthman Taha Naskh", Arial; 
    margin: 2px 5px 10px 5px;
}

/* Assem: Terms Static Highlighting colors */
.match { color: #181; }
.term0, .term9 { color: #F50; }
.term1, .term10 { color: #f00; }
.term2, .term11 { color: #f39; }
.term3, .term12 { color: #811; }
.term4, .term13 { color: #807; }
.term5, .term14 { color: #660; }
.term6, .term15 { color: #5C3; }
.term7, .term16 { color: #444; }
.term8, .term17 { color: #118; }



.word_details, .word_extra_details, .sura_details, .aya_details {
    margin: 5px 5px 0px 20px;
}

.aya_stat0, .sura_stat1 {
    background-color: #00A;
    color: #FFF;
}

.aya_stat1, .sura_stat2 {
    background-color: #30D;
    color: #FFF;
}

.aya_stat2, .sura_stat3 {
    background-color: #00F;
    color: #FFF;
}

.aya_pos0 {
    background-color: #074;
    color: #FFF;
}

.aya_pos1 {
    background-color: #062;
    color: #FFF;
}

.aya_pos2 {
    background-color: #084;
    color: #FFF;
}

.aya_pos3 {
    background-color: #094;
    color: #FFF;
}

.sura_info0 {
    background-color: #F50;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
}

.sura_info1 {
    background-color: #E80;
    color: #FFF;
}

.sura_stat0 {
    background-color: #90A;
    color: #FFF;
}

.sura_ord0 {
    background-color: #666;
    color: #FFF;
}

.sura_ord1 {
    background-color: #888;
    color: #FFF;
}

.sura_ord1 {
    background-color: #888;
    color: #FFF;
}

.sura_ord1 {
    background-color: #888;
    color: #FFF;
}


.aya_sajda_exist {

    background-color: #E44;
    color: #FFF;
    
}

.aya_sajda_id {
    
    background-color: #C44;
    color: #FFF;
    
}

.aya_sajda_type {
    background-color: #A44;
    color: #FFF;
}

.clickable {
    font-weight: bold; 
    border-style:solid;
    border-color:#A0C;
    border-width:1px;
}

.filter {
    
    border-color:#000;
    
}

.no_decoration {
    text-decoration:none;
        
}

/* Abdellah AD.*/


.left {
    float: left;
}

img.left {
    margin-right: 10px;
}

.right {
    float: right;
}

img.right {
    margin-left: 10px;
}



.quran_decoration {
direction: rtl;
font-family: ArabeyesQr, Scheherazade;
}


</style>

<div style="direction:{{ direction }};text-align:{{ align }}">
    {% if results.error.code == 0  %} 
        <!-- Suggestions-->
        {% if suggestions.error.code == 0 and suggestions.suggest %} 
            <div id='suggestions' style=" text-align:{{ align }}" >
            <h2 class='suggestionheader'>{% trans %}Suggestions:{% endtrans %}</h2>
            {% for suggestion_key, suggestion_item in suggestions.suggest.items %}
                <p style="direction: {{ direction }};" >
                <div class='word_details'>
                <span style=' font-size:14pt; color:#00aa00;'> {{ forloop.counter }}. </span>
                <div class='details_label word_info0'> {% trans %}word{% endtrans %} |  {{ suggestion_key }} </div>
               {% for suggestion_sub_item  in suggestion_item %}

                            <a href="{{  suggestion_sub_item  }}"><div class='details_label word_stat1 clickable'> {{ suggestion_sub_item }}</div></a>
                {% else %}
                    <div class='details_label word_stat0'> {% trans %}no suggestions!{% endtrans %} </div>
                {% endfor %}

                </div></p>
            {% endfor %}
        </div><br />
        {% endif %}
        {% if results.search.interval.total %}
            <!-- translation results -->
            <h2 style=' font-size:15pt;  color:#ff0000;'>
             {% trans %}Results{% endtrans %} ( {{ results.search.interval.start }} 
             {% trans %} to {% endtrans %} {{ results.search.interval.end }}
              {% trans %} of {% endtrans %} {{ results.search.interval.total }} )
            </h2> <br /> 
            
            {% for translationresult_id, translationresult_content in   results.search.translations.items() %}
                <fieldset class='main_re_item'>
                  <legend class='main_re_item_title' style='font-size:14pt; direction: {{ direction }};'>
                    
                      {% trans %}Result n°{% endtrans %} <b> {{ translationresult_id }} </b> -
                      {% if translationresult_content.aya %}
                      <span style="text-align:left;" style='color:#0000ff;'>
                            <a class=""  href='gid:{{  translationresult_content.identifier.gid }} AND id:{{ translationresult_content.identifier.id }}'>
                            <small>
                                {% trans %}Interpretation of{% endtrans %}
                                
                            <b> ( {% if direction == "rtl" %}
                                    {{  translationresult_content.aya.sura_arabic_name }}
                                    {% else %}
                                    {{ translationresult_content.aya.sura_name }}
                                    {% endif %}
                                {{ translationresult_content.aya.aya_id }} )
                                </b>
                            
                            
                               {% trans %}in{% endtrans %} {{ translationresult_content.info.language }}
                                {% trans %}by{% endtrans %} {{ translationresult_content.info.author }}
                    
                            </small>
                            </a>
                       </span>
                    {% endif %}
                    
                  </legend>
                  <br />
                    
                  <p style="direction: ltr;text-align:center">
                     
                     
                     <span  class='aya_words quran main_translation '>
                    [
                    
                          {% for translation_word in translationresult_content.text.split(" ") %}
                                      {% if translation_word[0] in "<ct> " %}
                                            {{ translation_word | safe }}
                                        {% else %}
                                            <a href="{{ translation_word.strip(':').strip(';').strip(',').strip('.').strip('?') }}">{{ translation_word }}</a>
                                        {% endif %}
                             {% endfor %}
                      ]
                     

                        {% if translationresult_content.aya %}
                          -
                          <a class=""  href='gid:{{ translationresult_content.identifier.gid }} AND lang:{{ translationresult_content.info.language_short }}'>
                            <small>
                              {% trans %}Interpretation of{% endtrans %} (
                                {% if direction == "rtl" %}  {{ translationresult_content.aya.sura_name }}
                                {% else %} {{ translationresult_content.aya.sura_name }}
                                {% endif %}
                                {{ translationresult_content.aya.aya_id }}
                              )
                            </small>
                          </a>
                        {% endif %}
                         </span> 
                    
                            <br />
                            <hr />
                    </p>

                      {% if translationresult_content.aya %}
                            <p style='direction:rtl; text-align:center' >
                                <span class='quran_decoration main_aya'>
                                 [ </span>
                                <span class="aya_words quran main_aya">
                                  {% for aya_word in translationresult_content.aya.text.split(" ") %}
                                      {% if aya_word[0] in "<ct> " %}
                                            {{ aya_word | safe }}
                                        {% else %}
                                            <a href="#aya# {{ aya_word }}">{{ aya_word }}</a>
                                        {% endif %}
                                  {% endfor %}
                                </span>
                                <span class='quran_decoration main_aya'>
                                ] </span>
                                
                                <span class='main_aya'>
                                            <a class='no_decoration' href='#aya# sura:{{ translationresult_content.aya.sura_name }}  AND aya_id:{{ translationresult_content.aya.aya_id }}'> 
                                    ({{ translationresult_content.aya.sura_arabic_name }} {{ translationresult_content.aya.aya_id }}) </a> 
                                 </span>
                            </p>
                            <br />
                      {% endif %}
  
                      <hr/>
                      <br/>
                        <div style='text-align:center'>
                                        <a class='' href='"author:{{ translationresult_content.info.author }}"'> 
                            <div class='details_label translation_author clickable filter'> {% trans %}Author{% endtrans %} | {{  translationresult_content.info.author }} </div></a>
                                        <a class='' href='lang:{{ translationresult_content.info.language_short }}'> 
                            <div class='details_label translation_language clickable filter'> {% trans %}Language{% endtrans %} | {{ translationresult_content.info.language }} </div></a>
                            </div>
                            <br />
                 </fieldset><br />
            {% endfor %}
            
        
                <br />
            <!-- Pages control # bottom one -->
            {% block pages_bottom %} {% endblock %}
            
        {% else %}
            <br />
            <div class='isa_warning'>{% trans %}Sorry! there is no results for this search query{% endtrans %}.</div>
            {% if extra_results.search.interval.total %}
                <div class='isa_info'>
                {% trans %}You may search in <b>Quran verses</b> instead, there are{% endtrans %} <b>{{ extra_results.search.interval.total }}</b> {% trans %}results{% endtrans %}. <b><a href="#aya# {{ flags.query }}"> {% trans %}Click to search!{% endtrans %}</a><b>
                </div>
             {% endif %}
            <br />
        {% endif %}
    {% else %}
         <div class='isa_error'>{% trans %}Error{% endtrans %} (<b>{{ results.error.code }}</b>) : {{ results.error.msg }}</div>
    {% endif %}
</div>
