{% extends "t_index.twig" %}

{% block header_css %}

    <link href="css/flash-info.css" rel="stylesheet" media="screen">
    <link href="css/conseil-jour.css" rel="stylesheet" media="screen">
	

    <!-- <link href="css/actualites.css" rel="stylesheet" media="screen">
    <link href="css/news-letter.css" rel="stylesheet" media="screen">
    <link href="css/revu_himaya.css" rel="stylesheet" media="screen"> -->
    <link href="css/meteo.css" rel="stylesheet" media="screen">

    <link href="css/agenda.css" rel="stylesheet" media="screen">
    <!-- <link href="css/zabuto_calendar.css" rel="stylesheet" media="screen"> -->
    <link href="css/zabuto_calendar.min.css" rel="stylesheet" media="screen">

    <!--link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/style.css"-->
    <!--!link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/examples.css"-->

    <!-- <link href="css/annuaire_centres.css" rel="stylesheet" media="screen"> -->

    <!-- <link href="css/video_actualite.css" rel="stylesheet" media="screen"> -->

    <!-- <link href="css/articles_presse.css" rel="stylesheet" media="screen"> -->

    <link href="Utilities/MediaPlayer/video-js.css" rel="stylesheet" type="text/css">
    
   <!--  <link href="css/article_content.css" rel="stylesheet" media="screen"> -->
    
   <!--  <link href="css/article.css" rel="stylesheet" media="screen"> -->
    <link href="css/mediatheque.css" rel="stylesheet" media="screen">
   <!--  <link href="css/video_article.css" rel="stylesheet" media="screen"> -->
	<link href="css/style.css" rel="stylesheet" media="screen">
     

{% endblock %}

{% block header_js %}

    <script src="js/zabuto_calendar.js"></script>
    <script src="js/zabuto_calendar.min.js"></script>
    <script src="js/agenda.js"></script>
    <script src="js/NewsLetter.js"></script>


    <script src="js/map/jquery.mousewheel.min.js" charset="utf-8" ></script>
    <script src="js/map/raphael-min.js" charset="utf-8" ></script>
    <script src="js/map/jquery.mapael.js" charset="utf-8" ></script>
    <script src="js/map/maps/algerie.js" charset="utf-8" ></script>

    <script src="js/map/examples.js" charset="utf-8" ></script>
  
    <script src="Utilities/MediaPlayer/video.js"></script>

    <script>
        videojs.options.flash.swf = "Utilities/MediaPlayer/video-js.swf";
		
		
    </script>

{% endblock %}
{% block view_content %}

    
	
	
	
	
	 <!--------------------------------------------------------------------------------------------------> 
  <!-------------------------------------------------------------------------------------------------->
  <div class="row main_content"> <!--main_content--> 
  <!--------------------------------------------------------------------------------------------------> 
  <!-------------------------------------------------------------------------------------------------->
  <div class="col-sm-3 left_side"> <!--main_content left-->
    <div class="row conseil_jour"> 
      <script type="text/javascript" language="javascript">


        $(function () {
            $('.conseil-jour').dotdotdot({
                watch: 'window'
            });
        });


    </script> 
      {% set conseilJour = data.conseilJour %}
      
      
      {% set twig_content_variable= conseilJour.CONTENU%} 
      <!--  {% set replace_value_var= '../../Media' %} --> 
      <!-- {% set replace_with_value_var = 'Media' %} --> 
      <!-- {{dump(conseilJour)}} -->
      <div class="col-xs-12 title">Conseil du jour</div>
      <div class="col-xs-12 sub_title"><a href="?controller=article&action=contenu&ida={{conseilJour.ARID}}&idr={{conseilJour.RUBID}}" class="link_s2" > <span class="glyphicon glyphicon-arrow-right"></span> {{ conseilJour.TITLE |raw}}</a></div>
      <div class="col-xs-12 text-center"><img class="img-responsive img-thumbnail" src="Media/article/images/{{conseilJour.IMAGE}}" /></div>
      <div class="col-xs-12 text-justify">
        <p>{{rawing(twig_content_variable|replace({(replace_value_var): replace_with_value_var }))|striptags|slice(0, 400)|raw}} </p>
      </div>
    </div>
    
    <!--<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><-->
    <div class="row meteo_container">
      <div class="col-xs-12 title">Météo</div>
      <div class="col-xs-12"> 
        
        <!-- meteo content -->
        
                 
        
        <!-- /meteo content --> 
        
      </div>
    </div>
  </div>
  <div class="col-sm-6 center_side"> <!--main_content center-->
    
    <div class="row"> 
	{% block article_content %}{% endblock %}
	
	</div>
 
  </div>
  <!--------------------------------------------------------------------------------------------------> 
  <!-------------------------------------------------------------------------------------------------->
  <div class="col-sm-3 right_side"> <!--main_content right-->
    <div class="col-xs-12 newsletter_holder"> <!--main_content right newsletter_holder-->
      <div class="col-xs-12 title">NewsLetter</div>
      <div class="text-center"> {% set typeAbonnements = data.typeAbonnements %} <a    type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#newsletter"   style="font-size: 15px;text-align: left;"> <span class="glyphicon glyphicon-envelope" aria-hidden="true" ></span> S'inscrire à la Newsletter </a>
        <div class="modal fade" id="newsletter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">NewsLetter</h4>
              </div>
              <div class="modal-body" id="newsletterSubmit">
                <form id="insertAbonnement"    method="post">
                  <div class="form-group" id='abonnements_type'>
                    <label for="recipient-name" class="control-label">Cochez les rubriques dont vous voulez vous inscrir:</label>
                    {% for  type in typeAbonnements %}
                    <div  class="checkbox" >
                      <label  >
                        <input type="checkbox"  id="{{type.ID}}" value="{{type.ID}}" name="abonnement[]">
                        {{type.TYPE}}</label>
                    </div>
                    {% endfor %} </div>
                  <div class="form-group has-feedback">
                    <label for="message-text" class="control-label">Email:</label>
                    <input  name="email_news_letter" type="email" class="form-control" id="email_news_letter" placeholder="Enter email">
                    <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span> </div>
                  <div class="form-group"> <img id="captcha" alt="CAPTCHA Image" > <a class="btn btn-info btn-sm" id="relaod_captcha" href="#">Rafraichir</a> <br>
                    <div class="form-group has-feedback" style="margin-top: 10px;">
                      <label class="control-label" for="captcha_code">Saisir le texte dans l'image</label>
                      <input id="captcha_code" class="form-control input-sm" type="text" placeholder="Saisir le texte dans l'image." name="captcha_code">
                      <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span> </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                    <button type="submit" id="send" class="btn btn-primary" data-loading-text="Envoie...">Valider</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade" id="newsLetterSuccess">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body" >
                <p ><span style="color:lightgreen;font-size: 20px;" class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> &nbsp; 	&nbsp;Abonnement avec succès</p>
              </div>
            </div>
            <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
        </div>
        <div class="modal fade" id="newsLetterError">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body" >
                <p ><span style="color:red;font-size: 20px;" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> &nbsp; 	&nbsp;Erreur,Abonnement non effectué</p>
              </div>
            </div>
            <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
        </div>
      </div>
    </div>
    <!--/main_content right newsletter_holder-->
    
    <div class="col-xs-12 revu_elhimaya"> <!--main_content right revu_elhimaya-->
      <div class="col-xs-12 title">Revue El HIMAYA</div>
      {% set revue = data.revue %}
      <div class="row">
        <div class="col-xs-5 col-xs-12 text-center"> <img class="revue-image img-responsive"   alt="revue_elhimaya_cover" src="Media/revue/images/{{ revue.IMAGE |raw}}"> </div>
        <div class="col-xs-7 col-xs-12">
          <div class="row text-center">
            <div class="col-xs-12 revue_elhimaya_cover"> N°{{ revue.NUMERO |raw}}</div>
          </div>
          <div class="row text-center"> <a href="?action=downloadRevue&f={{revue.FILE}}"   class="btn btn-default revue_btn" style="margin-top: 10px;"> <span class="glyphicon glyphicon-download" aria-hidden="true"></span> Télécharger </a> </div>
          <div class="row text-center"> <a href="?controller=listing&action=revue"  class="btn btn-default revue_btn_archive" > <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Voir l'archive </a> </div>
        </div>
      </div>
    </div>
    <!--/main_content right revu_elhimaya-->
    
    <div class="col-xs-12 video_actualites"> 
      <!--main_content right video_actualites--> 
      {% set video = data.videoJour %}
      <div class="col-xs-12 title">La video de l'actualité</div>
      <div class="col-xs-12 subtitle_s1">{{ video.TITRE |raw}}</div>
      <div class="col-xs-12">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="100%" 
                       poster="Media/videos/images/{{video.IMAGE |raw}}"
                       data-setup="{}">
          <source src="Media/videos/{{video.FILE |raw}}" type='video/flv' />
          {#
          <track kind="captions" src="demo.captions.vtt" srclang="fr" label="Francais"></track>
          <!-- Tracks need an ending tag thanks to IE9 -->
          <track kind="subtitles" src="demo.captions.vtt" srclang="fr" label="Francais"></track>
          <!-- Tracks need an ending tag thanks to IE9 --> 
          #}
          <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
      </div>
    </div>
    <!--/main_content right video_actualites--> 
  </div>
</div>
 <hr>
<!--############################################## Image viewer######################################################################################################################################-->	

<div id="modalImageViewer" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3 class="modal-title">Heading</h3>
	</div>
	<div class="modal-body">
		
	</div>
	<div class="modal-footer">
		<button class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
   </div>
  </div>
</div>
<script>
$('img.img-modal').click(function(){
  	$('#modalImageViewer .modal-body').empty();
  	var title = $(this).parent('a').attr("title");
  	$('.modal-title').html(title);
  	$($(this).parents('a').html()).appendTo('#modalImageViewer .modal-body');
  	$('#modalImageViewer').modal({show:true});
});
</script>
<!--    ..................................   -->    

    {% endblock %}