<%- include('partials/_header.ejs') -%>

<body>
	<div class="tm-page-wrap mx-auto">
		<div class="position-relative">

			<%- include('partials/_navigation.ejs') -%>

			<div class="tm-welcome-container tm-fixed-header tm-fixed-header-1">
				<div class="text-center">
					<p class="pt-5 px-3 tm-welcome-text tm-welcome-text-2 mb-1 text-white mx-auto">Background image can be fixed. Content will simply slide over.</p>                	
				</div>                
            </div>

			<!-- Header image -->
            <div id="tm-fixed-header-bg"></div> 
		</div>

		<!-- 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">
							<img src="<%= photo.image %>" alt="<%= photo.title %>" class="img-fluid tm-catalog-item-img">
						</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"><%= photo.title %></h2>
								<p class="mb-4"><%= photo.description %></p>	
							</div>							
						</div>
						<div class="col-xl-4 col-lg-5">
							<!-- Share box -->
							<div class="tm-bg-gray tm-share-box">
								<div class="text-center">
									<a href="/photos/edit/<%= photo._id %>" class="btn btn-primary p-0 mb-4 tm-btn-animate tm-btn-download tm-icon-download"><span>Update Details</span></a>	
								</div>	
								<div class="text-center">
									<a href="/photos/<%= photo._id %>?_method=DELETE" onclick="return confirm('Fotoğrafı silmek istediğinizden emin misiniz?')" class="btn btn-danger p-0 tm-btn-animate tm-btn-download tm-icon-download"><span>Delete Photo</span></a>	
								</div>								
							</div>
						</div>
					</div>
				</main>

				<!-- Subscribe form and footer links -->
                <%- include('partials/_footer.ejs') -%>
			</div> <!-- .tm-content-container -->
		</div>
	</div>

	<script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    	$(document).ready(function() {
    		$('.tm-likes-box').click(function(e) {
    			e.preventDefault();
    			$(this).toggleClass('tm-liked');

    			if($(this).hasClass('tm-liked')) {
    				$('#tm-likes-count').html('486 likes');
    			} else {
    				$('#tm-likes-count').html('485 likes');
    			}
    		});
    	});
    </script>
</body>
</html>