{% extends "layouts/base.html" %}

{% load static %}  

{% block title %} Edit Creative {{ adspost.name }} {% endblock %}

{% block extra_css %} {% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Insert Creative </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Creatives</a></li>
            <li class="breadcrumb-item active" aria-current="page">New</li>
        </ol>
    </div>
</div> 
{% endblock breadcrumb %}

{% block content %}
<!--app-content open-->
<div class="app-content">
	<div class="side-app"> 
		<!-- PAGE-HEADER -->
		<div class="page-header">
			<div>
				<h1 class="page-title">Edit Creative</h1>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Creatives</a></li>
					<li class="breadcrumb-item active" aria-current="page">Edit Creative {{  adspost.adspot_name }}</li>
				</ol>
			</div> 
		</div> 
		<!-- ROW-5 -->
		<div class="row">
			<div class="col-12 col-sm-12">
				<form method="post" action="{% url 'campaigns:update_creative' id_adpost=adspost.id %}" 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">Campaign : {{ adspost.id_campaign.name }} </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 campaigns %}
										<option value="{{campaign.id_campaign}}" {% if adspost.id_campaign.id_campaign == campaign.id_campaign %}selected{% endif %}>{{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 : {{ adspost.adspot_name }} </label>
									<input class="form-control mb-4" placeholder="Creative Name or Product Name" value="{{ adspost.adspot_name }}" name="adspot_name" type="text">
								</div>
								<div class="col-lg">
									<label class="form-label">Duration (in seconds) : {{ adspost.duration }}</label>
									<input class="form-control mb-4" placeholder="30" name="adspot_duration"  value = "{{ adspost.duration }}" type="text">
								</div>
								<div class="col-lg">
									<label class="form-label">Status :
										{% if adspost.status == '1' %} Active {% else %} InActive {% endif %}
									</label>
									<select class="form-control select2-show-search form-select mb-4" name="active_0_1" data-placeholder="Choose one"> 
											<option value="1" {% if adspost.status == '1' %} Selected {% endif %}> Active </option>
											<option value="0" {% if adspost.status == '0' %} Selected {% endif %} > 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" value="{{ adspost.creative_id }}">
								</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">
								<a href="/static/{{ adspost.original_filepath }}"> Download current Video  </a>
							</div>
							<br> 
							<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 %}