{% extends "base_list.html" %}
{% load static %}

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

{% block lists %}
<div class="row">
    <div class="col-md">
        <h2>{{object.name}}</h2>
        {% if object.photo %}
        <img src="{{object.photo_medium.url}}" class="img-fluid rounded mb-3" alt="{{object.name}}" />
        {% endif %}
        <div class="row mb-2">
            <div class="col-sm-3"><strong>Level:</strong> {{object.level|default:"-"}}</div>
            <div class="col-sm-3"><strong>Force:</strong> {{object.force|default:"-"}}</div>
            <div class="col-sm-3"><strong>Equipment:</strong> {{object.equipment|default:"-"}}</div>
            <div class="col-sm-3"><strong>Mechanic:</strong> {{object.mechanic|default:"-"}}</div>
        </div>
        <p><strong>Primary muscles:</strong>
            {% for muscle in object.primary_muscles %}<span class="badge bg-secondary me-1">{{muscle}}</span>{% endfor %}
        </p>
        <p><strong>Secondary muscles:</strong>
            {% for muscle in object.secondary_muscles %}<span class="badge bg-secondary me-1">{{muscle}}</span>{% endfor %}
        </p>
        {% if object.instructions %}
        <h3>Instructions</h3>
        <ol>
            {% for step in object.instructions %}
            <li>{{step}}</li>
            {% endfor %}
        </ol>
        {% endif %}
    </div>
</div>
{% endblock %}