{header}

<!-- begin_edge_style -->
<style>
    .hide_edge{
        display: none;
    }
</style>
<!-- end_edge_style -->

<script type="text/javascript" src="{url_tmpl_administration}js/jquery.validate.js{cache_version_param}"></script>

<div class="content-header row">
	<div class="content-header-left col-md-4 col-12 mb-2">
		<h3 class="content-header-title">{l_title_current}</h3>
	</div>
	<div class="content-header-right col-md-8 col-12">
		<div class="breadcrumbs-top float-md-right">
			<div class="breadcrumb-wrapper mr-1">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="{url_main}administration/music_songs.php">{l_menu_songs}</a>
					</li>
					<li class="breadcrumb-item active">
						{l_title_current}
					</li>
				</ol>
			</div>
		</div>
	</div>
</div>

{menu_page}

<div class="content-body">

	<div class="alert alert-success border-0 alert-dismissible mb-2-1" role="alert">{l_changes_save}</div>

	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{l_title_current}</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<h5>{song_title_header_short}</h5>
						<hr class="mb-2">

						<form method="POST" id="place_edit_form" action="{url_main}administration/music_song_edit.php?cmd=update&song_id={song_id}">
							<fieldset class="form-group">
								<label>{l_listen_song}:</label>
								<audio class="player_audio form-control" src="{song_url}" controls></audio>
							</fieldset>

							<fieldset class="form-group">
								<label>{l_song_title}:</label>
								<input class="form-control" type="text" name="song_title" value="{song_title}">
							</fieldset>
							<fieldset class="form-group hide_edge">
								<label>{l_song_year}:</label>
								<select class="form-control" name="song_year" id="song_year">
								{song_year_options}
								</select>
							</fieldset>
							<fieldset class="form-group hide_edge">
								<label>{l_song_about}:</label>
								<textarea name="song_about" id="song_about" class="form-control h_120">{song_about}</textarea>
							</fieldset>


							<!-- begin_photo_edit -->
							<h5 class="mt-3">{l_edit_photos}</h5>
							<hr>
							<script>
							function edit_delete_image(image_id){
								confirmCustom('{j_are_you_sure}',function(){
									$('#place_img_bl_' + image_id).animate({
										width: 0, marginRight:0}, 300, function() {
										$('#place_img_bl_' + image_id).remove();
										$.ajax({
											type: 'POST',
											url: '{url_main}administration/music_song_image_delete_ajax.php',
											data: {
												image_id: image_id
											}
										})

									})
								})
							}
							</script>

							<fieldset class="form-group">
								<!-- begin_photo-->
								<div class="image_list_pl" style="width:85px;" id="place_img_bl_{image_id}">
									<a id="place_img_{image_id}_lb" class="edit_image_gallery" href="{image_file}">
										<img id="place_img_{image_id}" width="85" height="64" src="{image_thumbnail}">
									</a>
									<p class="no_gallery">
										<a onClick="return edit_delete_image({image_id});">{l_delete}</a>
									</p>
								</div>
								<!-- begin_photo_odd-->
								<!-- end_photo_odd-->
								<!-- begin_photo_even-->
								<!-- end_photo_even-->
								<!-- end_photo-->
							</fieldset>

							<!-- begin_no_photos -->
							<div class="alert alert-light mb-2 alert-info-1" role="alert">
                            {l_no_photo}
							</div>
							<!-- end_no_photos -->
							<!-- end_photo_edit -->


							<fieldset class="form-group">
								<div class="wrap_button">
									<button class="btn btn-primary btn_submit" type="submit">{l_save}</button>
									<div class="button_submit_instruction">{l_or_use_ctrl_s}</div>
								</div>
							</fieldset>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script>
$(function(){
    $("#place_edit_form").validate({
        rules: {
            song_title: "required",
            song_about: "required"
        },
        messages: {
        	song_title: "{j_please_specify_title}",
        	song_about: "{j_please_enter_text}"
        }
    })
})

_initLightbox();
</script>

{footer}