<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head id="head">

  {% block head %}
    
<meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Home</title>
    <link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/common.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/ui-red/jquery-ui.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/ui-lightness/jquery-ui-1.8.24.custom.css">
    <script src="{{ STATIC_URL }}js/vendor/modernizr-2.6.1.min.js"></script>	 
{% endblock %}
</head>

{% block body %}
    <body>
{% endblock %}
         <div class="wrap">
          {% block main %}
            <div class="header">
 {% block header %}
 				<div class="logo">
                  <div class="date">
                      <span class="year">5</span>
                      <span class="text">années archivées</span>
                  </div>
                </div>
  {% block recherche %}
                 <div class="recherche-wrap">
                    <h1><img src="{{ STATIC_URL }}img/mediapart-by-periplus.jpg" alt="" /></h1>
                    <form method="post" action="/recherche/">{% csrf_token %}
                    <input type="hidden"  name="filtre"  value="nok">
                    <input type="hidden" name="from_date" value="07/01/2007" />
                    <input type="hidden" name="to_date" value="12/01/2012" />
                        <p >
                            <a href="#" class="photo"></a>
                            <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" id="recherche"/>
                            <input type="submit" value="" class="recherche-submit"/>
                           
                        </p>
                    </form>
                </div>
{% endblock %}
                <ul class="header-menu">
                    <li><a href="#"><img src="{{ STATIC_URL }}img/home-button.jpg" alt="" /> </a></li>
                    <li><a href="#">INTERNATIONAL</a></li>
                    <li><a href="#">FRANCE</a></li>
                    <li><a href="#">ECONOMIE</a></li>
                    <li><a href="#">CULTURE</a></li>
                    <li><a href="#">CLUSTER X</a></li>
                </ul>

 {% block login %}
                <div id="login" class="login-wrap">
                {% if user.username == ''%}
                    <h2>CONNECTER VOUS</h2>
                    {% if form.errors %}
	  	    	      <p>Le login et le mot de passe ne correspondent pas, essayez a nouveau.</p>
	    	    	 {% endif %}
                    <form method="post" action="/login/?next={{request.get_full_path}}">{% csrf_token %}
                        <p><input id="username" type="text" name="username" placeholder="Identifiant" /></p> 
                        {{ user.username }}
                        <p class="submit-wrap">
                            <input class="password" type="password" name="password" placeholder=".............."/>
                            <input class="submit-button" type="submit" value="OK" />
                        </p>
                    </form>
                    <p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p>
                    {% if not loginstatus == ''%}
					{{ loginstatus }}
					{% else %}
                    	</br>
			{% endif %}
            {% else %}
                <form method="post" action="/logout/?next={{request.get_full_path}}">{% csrf_token %}
                       <div style="display:block;">
                       <div class="header-name">
                       {{ user.username }}
                       </div>
                        <input class="submit-button" type="submit" value="d&#233;connexion">
                       </div>          
                </form>
            {% endif %}
            </div>
{% endblock %}

                
                <a href="http://localhost:8000/documentary_files/{{user.username}}/0/10" ><p class="dossier-button" >DOSSIERS DOCUMENTAIRES</p></a>

                <div class="dossier-documentaire">
                    <div class="dossier-documentaire-inner">
                        <h2>MES DOSSIERS</h2>
                        <ul>
                        {% for dossierDoc in dossierDocs %}
                			{% for mydoc in dossierDoc %}
                             <li class="clearfix">
                             	 <a href="#">
                                 <img src="{{ STATIC_URL }}images/{{mydoc.url }}" alt="" />
                             	 <span class="documentaire-texte">
                                 <h3>{{ mydoc.title }}</h3>
                                 <p>{{ mydoc.description }}</p>
								  </span>
                                </a>
                            </li>
                			{% endfor %}
                		{% endfor %}
                		</ul>
                        <a class="documentaire-lien" href="#"></a>
                    </div>
                </div><!--dossier-documentaire-->
                {% endblock %}
            </div><!-- header -->
            
             <div class="content-wrap clearfix">
              {% block frise %}
                 <div class="frise">
                    <div class="streamgraph"></div>
                    <div id="slider-range"></div>
                </div><!-- frise -->
                {% endblock %}
                
                <div class="content clearfix">
                {% block contentleft %}
                     <div class="content-left">
                     
                    
                     </div>
                      {% endblock %}
            		
                    <div class="content-right" id="right">
                    {% block contentright %}
                     {% endblock %}
                    </div>
                 </div>
                 
                <div class="footer clearfix">
                        <div class="footer-information">
                            <h2>Information utiles</h2>
                            <ul>
                                <li>- <a href="#">Mentions légales</a></li>
                                <li>- <a href="#">Mentions légales</a></li>
                                <li>- <a href="#">Conditions d'utilisations générale</a></li>
                                <li>- <a href="#">Le projet Periplus</a></li>
                            </ul>
                        </div>
                        <div class="footer-raccourci">
                            <h2>Raccourcis</h2>
                            <ul>
                                <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
                                <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
                                <li>- <a href="#">Conditions d'utilisations générale</a>
                            </ul>
                        </div>
                        <div class="footer-partenaire">
                            <h2>Partenaires</h2>
                            <ul>
                                 <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
                                <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
                                <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
                            </ul>
                        </div>
                        <div class="footer-texte">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco.
                        </p>
                        </div>
                  </div><!-- footer -->
            </div><!-- content-wrap -->
            <div class="copyright">
                &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
            </div>
      
            {% endblock %}
        </div>
        <script src="{{ STATIC_URL }}js/vendor/jquery-1.8.0.min.js"></script>
        <script src="{{ STATIC_URL }}js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
        <script src="{{ STATIC_URL }}js/vendor/dragslider.js"></script>
        <script src="{{ STATIC_URL }}js/lib/raphael-min.js"></script>
        <script src="{{ STATIC_URL }}js/lib/underscore-min.js"></script>
        <script src="{{ STATIC_URL }}js/plugins.js"></script>
        <script src="{{ STATIC_URL }}js/main.js"></script>
        <script src="{{ STATIC_URL }}js/streamgraph.js"></script>

    </body>
</html>
