{% extends '_layout.html' %}

{% block title %}
	Les Stories
{% endblock %}

{% block breadcrumb %}
	<li><a href="{% url 'index' %}">Accueil</a></li>
	<li><a>Toutes les Stories</a></li>
{% endblock %}

{% block main %}

	<header class="flex-row flex-align-center" style="margin-bottom: 2em;">
		<h2 class="flex-extend">Stories</h2>
		<b style="margin-right: 20px;">Nombre: {{ count }}</b>
		<b style="margin-right: 25px;">Poids: {{ total_weight }}</b>
		<a id="new-story" class="button icon fa-plus tool-btn alt" href="{% url 'story_create' %}" title="Nouvelle Story">Nouvelle Story</a>
	</header>

	<div id="stories">

		<div class="flex-row filters-bar">
			<label>Etat: </label>
			<select data-filter="state">
				<option value="" selected="selected">Tous</option>
				<option value="open">Ouvert</option>
				<option value="closed">Clôturé</option>
			</select>
		
			<label>Sprint: </label>
			<select data-filter="sprint">
				<option value="" selected="selected">Tous</option>
				<option value="None">(Aucun)</option>
				{% for sprint in sprints %}
					<option value="{{ sprint.id }}">{{ sprint }}</option>
				{% endfor %}
			</select>
		
			<label>Assignées: </label>
			<select data-filter="assignee">
				<option value="" selected="selected">Tous</option>
				{% for user in users %}
					<option value="{{ user.id }}">{{ user.first_name }} {{ user.last_name }}</option>
				{% endfor %}
			</select>
			
			<label>Type: </label>
			<select data-filter="story-type">
				<option value="" selected="selected">Tous</option>
				<option value="0">Standard</option>
				<option value="1">NEW</option>
				<option value="2">Non-Planifiée</option>
			</select>
		</div>
	
		{% if stories %}
		    <ul class="alt issues-list">
		    {% for story in stories %}
		    
		    	{% include 'story_li.html' with story=story from='story_index' %}
		    
		    {% endfor %}
		    </ul>
		 {% else %}
		 	<span class="annotation">(Rien à afficher)</span>
		 {% endif %}
		 
		<div class="pagination">
	    	{% for numpage in pages %}
	    		{% if numpage == stories.number %}
	    			<a style="color: grey;">{{ numpage }}</a>
	    		{% else %}
	    			<a class="clickable" data-page="{{ numpage }}">{{ numpage }}</a>
	    		{% endif %}
	    	{% endfor %}
		</div>
	
	</div>
{% endblock %}