{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
  {% include 'header.html' %}
	<main id="main-content">
		<section>
			<div>
				{% if object_list %}
					<h1>{% translate 'Failure modes' %}</h1>
					<div class="horizontal-scroll">
						<table>
							<caption>{% translate 'Failure mode tabel:' %}</caption>
							<thead>
								<tr>
									<th>{% translate 'Risk Class' %}</th>
									<th>{% translate 'Failure Mode' %}</th>
									<th>{% translate 'Details' %}</th>  
									<th>{% translate 'Edit' %}</th>                         
								</tr>
							</thead>
							<tbody>
								{% for object in object_list %}
									<tr>
										<td>
											<span class="{{ object.risk_class.split|join:'-'|lower }}">
												{{ object.risk_class }}
											</span>
										</td>
										<td>
                      <a href="{{ object.get_absolute_url }}">{{ object.failure_mode }}</a>
                    </td>
										<td><button 
											class="expando-button" 
											data-icon-open-class="icon ti-chevron-down" 
											data-icon-close-class="icon ti-chevron-up" 
											data-close-label="{% translate 'Sluit details' %}">{% translate 'Details' %}</button></td>
										<td><a href="{{ object.get_update_url }}">{% translate 'Edit' %}</a></td>
									</tr>
									<tr class="expando-row">
										<td colspan="4">
											<p>
												<b>{% translate 'Description:' %}</b> {{ object.description }}<br>
												<b>{% translate 'Frequency level:' %}</b> {{ object.get_frequency_level_display }}<br>
												<b>{% translate 'Detectability level:' %}</b> {{ object.get_detectability_level_display }}<br>
												{% if object.risk_class %}
													<b>
														{% blocktrans count object.effect.all.count as count %}
															Effect and severity level
															{% plural %}
															Effects and severity levels
														{% endblocktrans %}
													</b>
												{% endif %}
												<ol type="A">
													{% for effect in object.effect.all %}
														<li>{{ effect }} - {{ effect.get_severity_level_display }}</li>
													{% endfor %}
												</ol>
											</p>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
					{% include 'partials/pagination.html' %}
				{% else %}
					<p>{% translate 'No failure mode yet defined.' %}</p>
					<a class="button" href="{% url 'fmea_failure_mode_create' %}">{% translate 'Create failure mode' %}</a>
				{% endif %}
			</div>
		</section>
	</main>
{% endblock %}
