{% extends "base.html" %}

{% block content %}

<script>
$(function(){
  /* Set the Max date */
  var dtToday = new Date();

  var month = dtToday.getMonth() + 1;
  var day = dtToday.getDate() + 14;
  var year = dtToday.getFullYear();

  if(month < 10)
      month = '0' + month.toString();
  if(day < 10)
      day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;    
  /* Set the Min date */
  var dtToday_min = new Date();
  
  var month_min = dtToday.getMonth() + 1;
  var day_min = dtToday.getDate()+1;
  var year_min = dtToday.getFullYear();
  if(month_min < 10)
      month_min = '0' + month_min.toString();
  if(day_min < 10)
      day_min = '0' + day_min.toString();
  
  var minDate = year_min + '-' + month_min + '-' + day_min;
  
  /* Run the codes */
  $('#closing_date').attr('max', maxDate);
  $('#closing_date').attr('min', minDate);
});

</script>
<div class="container-create_art">
  <div class="wrap-create_art">
    <div class="create_art-pic" data-tilt>
      <img src="static/templates/painting.jpg" alt="IMG">
    </div>
    <form action="" method="POST" enctype="multipart/form-data" class="contact100-form">
      <span class="create_art-form-title">
        <b>Create Art Auction</b>
      </span>
      <!--Input Art Name-->
      <div class="create_art-input-box">
        <input 
        type="art_name" 
        class="form-control create_art-input" 
        id="art_name"
        name="art_name"
        placeholder="Enter Art Name"
        />
      </div>
      <!--Input Minimum Price-->
      <div class="create_art-input-box">
        <input 
        type="number" 
        class="form-control create_art-input" 
        id="minimum_price"
        name="minimum_price"
        placeholder="Enter Minimum Price (USD)"
        />
      </div> 
      <!--Input Buyout Price-->
      <div class="create_art-input-box">
        <input 
        type="number" 
        class="form-control create_art-input" 
        id="buyout_price"
        name="buyout_price"
        placeholder="Enter Buyout Price (USD)"
        />
      </div>
      <!--Input Description-->
      <div class="create_art-input-box">
        <textarea type="description" class="form-control create_art-input description_size" id="description" name="description" placeholder="     Enter Description"></textarea>
      </div>
      <!--Upload Art or choose what they bought before-->
      <hr class="hr_size">
      <div class="row">
        <div class="col input-group-prepend">
          <label class="input-group-text">File upload</label>
            <input
              type="file" 
              id="profile_image" 
              name="profile_image" 
              accept="image/png, image/jpeg" 
              value="Upload"
              src="http://example.com/path/to/image.png"
              class="upload_Create_art input-group-text"
            >
        </div>
        <p class="upload_Create_art_position">**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
      </div>
      <p class="body-column-create_art word_OR_location"><b>OR</b></p>
      <!-- Dropdown Menu-->
      <div class="row">
        <div class="col input-group-prepend">  
          <span class="input-group-text">Select Art in Platform</span>  
          <select class="btn btn-secondary dropdown-toggle Closing-date-input-size" name="web_group" required aria-invalid="false"> 
            <option value="cng-555">Select here</option>
            <option name="web_group" value="bought_art">bought_Art</option>
          </select>
        </div>
      </div>
      <hr class="hr_size">
      <!--Choose Time for Auction ends (I will check how I can limit the user 14days)-->
      <div class="row">
        <div class="col input-group-prepend">  
          <span class="input-group-text Choose-Time-for-Auction-ends">Auction End Date</span>
          <input type="date" id="closing_date" name="closing_date" class="body-column-create_art Closing-date-input-size">
        </div>
      </div>
      <!-- Tips for the date to let user know-->
      <div class="row tips_location">
        <small>Tips:</small>
      </div>
      <div class="row tips_location">
        <small>- The maximum Auction time is 14 days</small>
      </div>
      <div class="row tips_location">
        <small>- The exact time of closing is 0000 hrs of that date</small>
      </div>
      <!-- Button for create Auction-->
      <div class="container-create_art-form-btn">
        <button class="create_art-form-btn">
          <b>Create</b>
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}