{% 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">Insert New Creative</h1>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Creatives</a></li>
					<li class="breadcrumb-item active" aria-current="page">Add New Creative</li>
				</ol>
			</div> 
		</div> 
		<!-- ROW-5 -->
		<div class="row">
			<div class="col-12 col-sm-12">
				<form method="post" action="/DAIManagement/add_creative/" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Select Campaign</h3>
						</div>
						<div class="card-body row"> 
							<div class="form-group col-md-6">
								<label class="form-label">Campaigns</label>
								<select class="form-control select2-show-search form-select" name="campaign_id" data-placeholder="Choose one" required>
									<option label="Choose one"></option>
									{% for campaign in data.campaigns %}
										<option value="{{campaign.id_campaign}}">{{campaign.name}}</option>
									{% endfor %}
								</select>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Creative Information</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="Creative Name or Product Name" name="adspot_name" type="text" required>
								</div>
								<div class="col-lg">
									<label class="form-label"> Duration (in seconds) </label>
									<input class="form-control mb-4" placeholder="30" name="adspot_duration" type="text" required>
								</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">
											<option value="1" selected="selected">Active</option>
											<option value="0">InActive</option>
									</select>
								</div> 
							</div> 
							<div class="row row-sm">
								<div class="col-lg">
									<label class="form-label"> VAST ID </label>
									<input class="form-control mb-4" placeholder="VAST ID" name="creative_id" type="text">
								</div> 
							</div>
						</div>
					</div>

					<div class="card"> 
						<div class="card-header">
							<h3 class="card-title"> 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>
								<label class="input-group-text btn btn-primary">
									Browse 
									<input type="file" class="file-browserinput" name="adspot_file" style="display: none;" accept=".mp4, .ts" >
								</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 %}