{% extends '_layout.html' %}

{% block title %}
	{{ epic.name }}
{% endblock %}

{% block breadcrumb %}
	<li><a href="{% url 'index' %}">Accueil</a></li>
	<li><a>Epic #{{ epic.id }}</a></li>
{% endblock %}


{% block main %}
	{% load martortags %}
	
	<header>
		<div class="flex-row">
			<h2 class="flex-extend">{{ epic.name }}</h2>
		
			<ul class="actions small">
				<li><a class="button special icon fa-edit tool-btn" href="{% url 'epic_edit' epic_id=epic.id %}" title="Modifier"></a></li>
				<!-- <li><a class="button icon fa-trash tool-btn" href="{% url 'epic_delete' epic_id=epic.id %}"></a></li> -->
			</ul>
		</div>
		
	</header>

	<div class="flex-row flex-space-around">
		<span>Taille: <b>{{ epic.size }}</b></span>
		<span>Valeur: <b>{{ epic.value }}</b></span>
	</div>
	
	<hr>
	
	<div class="flex-row">
		<h4 class="flex-extend">Stories</h4>
		<a href="{% url 'story_create' epic_id=epic.id %}">
			<i class="fa fa-plus"></i> Ajouter une story
		</a>
	</div>
	
	{% if epic.stories.count %}
	    <ul class="alt issues-list">
	    {% for story in epic.stories.all %}
	    
	    	{% include 'story_li.html' with story=story from='epic_details' %}

	    {% endfor %}
	    </ul>
	 {% else %}
	 	<span class="annotation">(Aucune story)</span>
	 {% endif %}
	
	<div class="description">
		{{ epic.description|safe_markdown }}
	</div>

	<hr>
	
	<div class="comment-section">
		<ul class="alt">
		{% for comment in epic.comments.all %}
			<li class="flex-col">
				<div><h5><i class="fa fa-comment"></i> {{ comment.author }}, le {{ comment.created }}:</h5></b></div>
				<div class="comment-display">
					{{ comment.content|safe_markdown }}
				</div>
			</li>
		{% endfor %}
		</ul>
		
		<form action="{% url 'epic_comment' epic_id=epic.id %}" method="post" accept-charset="utf-8">
			{% csrf_token %}
			{{ comment_form.as_p }}
			
	    	<div class="flex-row flex-end" style="margin-top: 10px;">
	    		<input type="submit">
	    	</div>
	    </form>
    </div>
    
{% endblock %}