{% extends "t_article.twig" %}


{% block header_css %}
<link rel="stylesheet" href="front_audio_player/css/reset.css" />
<link rel="stylesheet" href="front_audio_player/css/audioplayer.css" />
  
{% endblock %}

{% block header_js %}
             <script>
			
			(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
		</script>	
   
{% endblock %}


{% block right_side %}
    
 {% set contenu = data.contenu %}
  {% set idr = data.idr %}
  {% set id_menu = data.id_menu %}
  {% set rub_title = data.rub_title %}
   {% set type=data.type  %}
   {% set list=data.list  %}
   {% set path=data.path  %}
    {% set next=data.next  %}
     {% set prev=data.prev  %}
 


   
    
  <div class="col-sm-8">
                 
                 {% if contenu %}   
                 <div style="" class="row col-sm-12">
  
      
      <ul class="breadcrumb " style="font-family: 'Droid Arabic Kufi',serif;font-size:12px;font-weight:bold;" class="head_idhaa">
      <li> <a href="?action=index">الرّئيسية</a></li>
       
        <li><a href="?snhtl=wrap&page=sawtiyat">الصّوتيات</a></li>
               
               
     
                  
                {% if type  %}
                     {% if type.type==1  %}
                     {% set titre='خطب منبرية'  %}
                      {% elseif type.type==2  %}
                          {% set titre='دروس و محاضرات'  %}
                           {% elseif type.type==3  %}
                          {% set titre='دورات علمية'  %}
                          {% endif   %}
                     
                 <li><a href="?snhtl=wrap&page=sawtiyat&type={{type.type}}">{{titre}}</a></li>
                 {% endif   %}
				 
				 {{rawing(path.path)|raw}}
                        
                     <li>    {{rawing(contenu.TITLE)}}
                        </li>
           </ul>             
  
                 <div style="margin: 0;" class="row max_head">
                     
                     <div style="font-weight: bold; padding: 10px;" class="head_title">
                        <p style="z-index: 10;">
                           

                         {{rawing(contenu.TITLE)}}

                        </p>
                     </div>
                    
                </div>
                     
                      
                <div style=";margin: 0;" class="row p_container">
             
                   
		
  
  
  <ul style="padding-right: 0px;">
  
   
      
              <div style="padding: 0px; margin-right: 0px; margin-left: 0px;margin-bottom: 10px;" class="row p_container">
                    
                    <div class="row col-sm-12 sawtiyat_player">
                        
                         {% if(contenu.ID_TYPE==1) %}
                          
                               {% set folder = 'khoutab' %}
                                {% elseif (contenu.ID_TYPE==2) %}
                                {% set folder = 'dourouss' %}
                                 {% elseif (contenu.ID_TYPE==3) %}
                                 {% set folder = 'dawrat' %}
                           {% endif %}
                           
                       
                        <div  style=" padding-top: 53px; margin-left: auto;margin-right: auto;max-width: 250px;" > 
                     
                            <div id="wrapper">
							
							<audio preload="auto" controls autoplay style="width:100%;">
				<source src="Media/sawtiyat/{{folder}}/{{contenu.FICHIER|trim|raw}}">
				
			</audio>
			
							
			

		           </div>
                           
                        </div> 
                     
           
                        
                    </div>
               

                </div>
                 

<div class="addtoany_share_save_container addtoany_content_bottom" style="margin-bottom: 10px;">
     <div id="" class="a2a_kit addtoany_list a2a_target">
        
     
        <a id="fb_link" class="social_icon" target="_blank" rel="nofollow" title="Facebook" href="" onclick="window.open(this.href, '{{makal_shahri.TITLE|raw}}',
'left=20,top=20,width=600,height=500,toolbar=1,resizable=1'); return false;" class="a2a_button_facebook" aria-label="Facebook">
        <img width="16" height="16" alt="Facebook" src="./images/social/facebook.png">
        
        </a>
        
        <a id="twitter_link" class="social_icon" target="_blank" rel="nofollow" title="Twitter" href="" onclick="window.open(this.href, '{{makal_shahri.TITLE|raw}}',
'left=20,top=20,width=600,height=500,toolbar=1,resizable=1'); return false;" class="a2a_button_twitter" aria-label="Twitter">
            <img width="16" height="16" alt="Twitter" src="./images/social/twitter.png">
        </a>
        
      
      
        
        <a id="gplus_link" class="social_icon" target="_blank" rel="nofollow" title="Google+" href="" onclick="window.open(this.href, '{{makal_shahri.TITLE|raw}}',
'left=20,top=20,width=600,height=500,toolbar=1,resizable=1'); return false;"  class="a2a_button_google_plus" aria-label="Google+">
            <img width="16" height="16" alt="Google+" src="./images/social/google_plus.png">
        </a>
<script>
$( document ).ready(function() {
    var url      = window.location.href; 
   $("#fb_link").attr("href", "http://www.facebook.com/sharer.php/?u="+url);
   $("#twitter_link").attr("href", "https://twitter.com/share?url="+url);
   
   $("#gplus_link").attr("href", " https://plus.google.com/share?url="+url);
});
</script>

</div>

</div>
  {% if rawing(contenu.DATE)!='00/00/0000' %}
             <p class="article_date">
            
              {{'التاريخ :  '~ rawing(contenu.DATE)}}
             </p>
             {% endif %}
			 
			   <p style="z-index: 10;	color: #D56E2C; background-color: #F0F1F1"> 
                                 
<div style="z-index: 10;	color: #D56E2C; background-color: #F0F1F1"> 
 تحميل </br>
 {% if(contenu.FICHIER) %}
 <div style="margin-left:20px;" class="pull-right">
  <a href="?page=downloadSawtiya&f={{contenu.FICHIER|trim|raw}}&type={{contenu.ID_TYPE}}&id={{contenu.IDS}}&nature=1" style="font-size:20px;">
                                        <i class="fa fa-file-audio-o"> </i>
                                        
                                   </a>
			</div>	
{% endif %}		

 {% if(contenu.WORD) %}	
<div style="margin-left:20px;" class="pull-right">			
								    <a href="?page=downloadSawtiya&f={{contenu.WORD|trim|raw}}&type={{contenu.ID_TYPE}}&id={{contenu.IDS}}&nature=2" style="font-size:20px;color:blue;">
                                        <i class="fa fa-file-word-o" style="color:blue;"> </i>
                                        
                                   </a>
						</div>	
{% endif %}	
{% if(contenu.PDF) %}
<div style="margin-left:20px;" >			
								    <a href="?page=downloadSawtiya&f={{contenu.PDF|trim|raw}}&type={{contenu.ID_TYPE}}&id={{contenu.IDS}}&nature=3" style="font-size:20px;color:red;">
                                        <i class="fa fa-file-pdf-o" style="color:red;"> </i>
                                        
                                   </a>
						</div>	
{% endif %}							
 </p>
								
                                </p>
								
								</div>
<div style="margin-top:15px;" >
 <p style="z-index: 10;	color: #D56E2C; background-color: #F0F1F1"> 
 (عدد المشاهدات   {{contenu.COUNT}} )
  {% if(contenu.DOWN_COUNT>0) %}<br>( تحميل {{contenu.DOWN_COUNT}} مرة ) {% endif %}
 
 </p>
 </div>	
</ul>
{% if(contenu.TEXT) %}
<div class="row p_container" style=";margin: 0;">
                    
                         
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#home22" style="font-weight: bold;padding: 2px 20px;">التفريغ النصّي</a></li>
                      
                    </ul>
                    
                     <div class="tab-content" style="padding-right: 5px;padding-top: 5px;border:solid 1px #BDBDCF;">
                   <div id="home22" class="tab-pane fade in active" style="padding:15px;">
        
                                           
                   {{rawing(contenu.TEXT)|raw}}
                
                  
                                       </div>
                  
                  
               

                                                  
                             

                                              </div>
      
                  
                </div>
                   
              {% endif %}	      
      <div style="width: 100%; height: 0px;">
          <img style="width: 100%; height: 6px; padding-right: 0px; margin-top: -38px;" src="./images/separation.png" alt="">
      </div>              
     {% if(  contenu.IDS!=-1)%}              
<div class="head_title" style="" width:="" 50%;="" font-weight:bold;="" float:right;="" margin-top:="" 9px;="" margin-right:="" 18px;"="">

    <ul style="list-style-type: none;" class="nav-menu page_suivant">
{% if(prev ) %}
	<li style="float: right;
padding-right: 3px;
background-position: right center;
background-repeat: no-repeat;
padding-right: 28px;
background-image: url(./images/previous-arrow.png);">
<a href="?snhtl=content&page=sawtiya&element={{prev.IDS}}&type={{prev.ID_TYPE}}&list={{prev.ID_LIST}}" rel="next">{{prev.TITLE}}</a>	
        
        </li>
        {% endif %}
        
        {% if(next ) %}
        
	<li style="float: left;
padding-left: 25px;
background-position: left center;
background-repeat: no-repeat;
padding-right: 28px;
background-image: url(./images/next-arrow.png);">
<a href="?snhtl=content&page=sawtiya&element={{next.IDS}}&type={{next.ID_TYPE}}&list={{next.ID_LIST}}" rel="next">{{next.TITLE}}</a>	
        
        </li>
        {% endif %}

</ul>
</div>
         {% endif %} 

                </div>
                
                    
                </div>
                    
                   
               {% else %}
                   
                   <p>
                       
                       المحتوى غير متوفر حاليا، يرجى الانتظار الى اشعار آخر
                   </p>
                    
                   {% endif %} 
                    
                    
                   
                    
                    
                </div>
{% endblock %}