{% extends "DAIManagementApp/base.html" %}
{% block content %}
                <!--app-content open-->
				<div class="app-content">
					<div class="side-app">

						<!-- PAGE-HEADER -->
						<div class="page-header">
							<div>
								<h1 class="page-title">Add New Jingle</h1>
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="#">Jingles</a></li>
									<li class="breadcrumb-item active" aria-current="page">Add New Jingle</li>
								</ol>
							</div>


						</div>


						<!-- ROW-5 -->
						<div class="row">
							<div class="col-12 col-sm-12">
								<form method="post" action="{% url 'add_jingle' %}" enctype="multipart/form-data">
									{% csrf_token %}


								<div class="card">
									<div class="card-header">
										<h3 class="card-title">Info About The Jingle</h3>
									</div>
									<div class="card-body pb-2">
										<div class="row row-sm">
											<div class="col-lg">
												<label class="form-label">Name</label>
												<input class="form-control mb-4" placeholder="Jingle Name" name="jingle_name" type="text" required>
											</div>

											<div class="col-lg">
                                                <label class="form-label">Channel</label>
                                                <select class="form-control select2-show-search form-select" name="channel_id" data-placeholder="Choose one" required>
                                                       <option label="Choose one"></option>
                                                       {% for channel in channels %}
                                                           <option value="{{channel.id_channel}}">{{channel.channel_name}}</option>
                                                       {% endfor %}

                                                </select>
                                           </div>
											<div class="col-lg">
												<label class="form-label">Status</label>
												<select class="form-control select2-show-search form-select mb-4" name="active_0_1" data-placeholder="Choose one" required>
													 <option value="1" selected="selected">Active</option>
													 <option value="0">InActive</option>
												</select>
											</div>




										</div>

									</div>
								</div>

									<div class="card">

									<div class="card-header">
										<h3 class="card-title">Video Upload </h3>
									</div>
									<div class=" card-body">

										<div class="input-group mb-5 file-browser">
											<input type="text" class="form-control browse-file" placeholder="Choose" readonly required>
											<label class="input-group-text btn btn-primary">
												Browse <input type="file" class="file-browserinput" name="video_file" style="display: none;" accept=".ts" required>
											</label>
										</div>
										<br>



									</div>


									</div>

                                    <div class="card">

                                        <div class="card-header">
                                            <h3 class="card-title">MD5 File Upload </h3>
                                        </div>
                                        <div class=" card-body">

                                            <div class="input-group mb-5 file-browser">
                                                <input type="text" class="form-control browse-file" placeholder="Choose" readonly required>
                                                <label class="input-group-text btn btn-primary">
                                                    Browse <input type="file" class="file-browserinput" name="md5_file" style="display: none;" accept=".md5" required>
                                                </label>
                                            </div>
                                            <br>

                                            <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>


                                        </div>


                                        </div>

								</form>


							</div><!-- COL END -->
						</div><!-- ROW-5 END -->
					</div>
				</div>

				{% endblock content %}