{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | View Exercises</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-12">
                <h2 class="f-22 mb-0 bold">Exercise Details</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>

        </div>
        <!-- exercise details-->
        <div class="trainer-details-rw exrcise row mt-4">
            <div class="col-12">
                <div class="details-left-block exercise">
                    <div class="card px-5 py-5">
                        <img class="exercise-view-icn" src="{% if sub_exercise_obj.primary_image %}{{ sub_exercise_obj.primary_image }}{% else %}/static/admin/images/exercise-banner.png{% endif %}" alt="user" />
                        <h4 class="f-22 bold">{{sub_exercise_obj.name}}</h4>
                        <p class="f-13 gray">{{sub_exercise_obj.description}}</p>
                        
                        <div class="row w-100 m-auto">
                            <div class="col-12">
                                <div class="row bg-light-blue p-4">
                                    <h6 class="f-20 bold">Comments</h6>
                                    <p class="border-bottom m-0">{{sub_exercise_obj.comments}}</p>
                                </div>
                            </div>
                            <div class="col-12 my-3">
                                 <h4 class="f-22 bold my-2">Notes</h4>
                                 <ol>
                                     <li class="f-13 gray my-3">{{sub_exercise_obj.note}}</li>
                                 </ol>
                            </div>


                            <div class="col-12 my-3">
                                 <h4 class="f-22 bold my-3">Images</h4>
                                   <div class="row">
                                    {% for img in sub_exercise_images %}
                                       <div class="col-12 col-md-3">
                                           <img src="{{img}}" alt="img" class="w-100 sub-exercs-img">
                                       </div>
                                       {% endfor %}
                                   </div>
                            </div>

                              <div class="col-12 my-3">
                                 <h4 class="f-22 bold my-3">Video</h4>
                                   <div class="row">
                                    
                                    {% for video in sub_exercise_videos %}
                                    <div class="col-12 col-md-6">
                                        <video width="100%" height="300px" controls>
                                            <source src="{{video}}" type="video/mp4">
                                          </video>
                                    </div>
                                    {% endfor %}
                                       
                                   </div>
                            </div>


                            <div class="col-12 my-3">
                                 <h4 class="f-22 bold">YouTube Video Link:</h4>
                                   <span class="f-13 gray my-3">{{sub_exercise_obj.youtube_link}}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


{% endblock %}