{% extends 'layout/base.html' %}

{% block title %}Chi tiết dự án{% endblock %}

{% block script %}rel="stylesheet" href="{{ url_for('static', filename='css/videodetail.css') }}"{% endblock %}
{% block content %}

    <div class="container-xxl bg-white p-0">
        <!-- Spinner Start -->
        <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <!-- Spinner End -->


        <!-- Navbar & Hero Start -->
        <div class="container-xxl position-relative p-0">

            {% include 'layout/header.html' %}

            <div class="container-xxl py-5 bg-primary hero-header">
                <div class="container my-5 py-5 px-lg-5">
                    <div class="row g-5 py-5">
                        <div class="col-12 text-center">
                            <h1 class="text-white animated slideInDown">Dự án</h1>
                            <hr class="bg-white mx-auto mt-0" style="width: 90px;">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb justify-content-center">
                                    <li class="breadcrumb-item"><a class="text-white" href="#">Trang chủ</a></li>
                                    <li class="breadcrumb-item text-white active" aria-current="page">Dự án</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Navbar & Hero End -->

        <!-- Page content -->
		<div class="container-fluid">
			<div class="mx-auto tm-content-container">
				<main>
					<div class="row mb-5 pb-4">
						<div class="col-12">
							<!-- Video player 1422x800 -->
{#							<video width="1422" height="800" controls autoplay>#}
{#							  <source src="https://www.youtube.com/watch?v=ADWlkPeULbo" type="video/mp4">#}
{#							Your browser does not support the video tag.#}
{#                           #}
{#	                        </video>#}
                             <iframe class="iframe" width="1285" height="720" src="{{ project.link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
						</div>
					</div>
					<div class="row mb-5 pb-5">
						<div class="col-xl-8 col-lg-7">
							<!-- Video description -->
							<div class="tm-video-description-box">
								<h2 class="mb-5 tm-video-title">{{ project.name }}</h2>
								<p class="mb-4">{{ project.description }}</p>
							</div>
                            <div class="container">
                                <h2>Hình ảnh sự kiện:</h2>
                                <div class="row">
                                {% if projectImages %}
                                  {% for projectImage in projectImages %}
                                    <div class="col-md-4" style="padding-top: 12px">
                                    <div class="thumbnail">
                                       
                                        <a href="{{ url_for('static', filename='images/imgDetailProject/' + projectImage.image) }}" target="_blank" data-lightbox="portfolio">
                                            <img src="{{ url_for('static', filename='images/imgDetailProject/' + projectImage.image) }}" alt="Lights" style="width:100%">
                                        </a>
                                    </div>
                                    </div>
                                  {% endfor %}
                                {% endif %}
                                </div>
                            </div>

						</div>
						<div class="col-xl-4 col-lg-5">
							<!-- Share box -->
							<div class="tm-bg-gray tm-share-box">
								<h6 class="tm-share-box-title mb-4">Chia sẻ video</h6>
								<div class="mb-5 d-flex">
									<a href="" class="tm-bg-white tm-share-button"><i class="fab fa-facebook"></i></a>
									<a href="" class="tm-bg-white tm-share-button"><i class="fab fa-twitter"></i></a>
									<a href="" class="tm-bg-white tm-share-button"><i class="fab fa-pinterest"></i></a>
									<a href="" class="tm-bg-white tm-share-button"><i class="far fa-envelope"></i></a>
								</div>
								<p class="mb-4"><a href="https://www.youtube.com/@granddreamsstudio/videos" class="tm-text-link">GRAND DREAMS STUDIO</a></p>
								<i class="fa fa-phone" aria-hidden="true"> 0944433351 - 0938938210</i>
								<!--
                                <a href="#" class="tm-bg-white px-5 mb-4 d-inline-block tm-text-primary tm-likes-box tm-liked">
									<i class="fas fa-heart mr-3 tm-liked-icon"></i>
									<i class="far fa-heart mr-3 tm-not-liked-icon"></i>
									<span id="tm-likes-count"></span>
                                    <i class="fa fa-phone" aria-hidden="true"> 0944433351</i>
								</a>
								<div>
									<button class="btn btn-primary p-0 tm-btn-animate tm-btn-download tm-icon-download"><span>Download Video</span></button>
								</div>
                                -->
							</div>
						</div>
					</div>
					<div class="row pt-4 pb-5">
						<div class="col-12">
							<h2 class="mb-5 tm-text-primary">Sản phẩm tương tự</h2>
							<div class="row tm-catalog-item-list">
                                {% for r in randomProject %}
		                        <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
		                            <div class="position-relative tm-thumbnail-container">
		                                <img src="{{ url_for('static', filename='images/imgProject/' + r.image) }}" alt="Image" class="img-fluid tm-catalog-item-img">
		                                <a href="{{ url_for('project_detail', project_id = r.id) }}" class="position-absolute tm-img-overlay">
		                                    <i class="fas fa-play tm-overlay-icon"></i>
		                                </a>
		                            </div>
		                            <div class="p-3 tm-catalog-item-description">
		                            <a href="{{ url_for('project_detail', project_id = r.id) }}">
                                        <h3 class="tm-text-gray text-center tm-catalog-item-title" href="{{ url_for('project_detail', project_id = r.id) }}">{{ r.name }}</h3>
                                    </a>
		                            </div>
		                        </div>
                                {% endfor %}
		                    </div>
						</div>
					</div>
				</main>
			</div> <!-- .tm-content-container -->
		</div>



        <!-- Back to Top -->
        <a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
    </div>


{% endblock %}