{% extends "base.html" %}
{% block title %} Edit Genre Category {{ genre.Category_Name }} {% endblock %}
{% block script %}
	<script type="text/javascript" src="{{ url_for('static', filename='delete.js') }}"></script>
    <script type="text/javascript">

        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("cancel");
		  
          a.onclick = function() {
		  
			var title = document.getElementById("category")
			title.innerHTML = "{{ genre.Category_Name }}"
			title.value = "{{ genre.Category_Name }}"
			
			alert("The genre with ID {{ genre.Category_ID }} have been reset to its original value")
          }
        }
    </script>
{% endblock %}
{% block content %} 

<h1>Edit Genre {{ genre.Category_Name }} </h1>

{% set messages = get_flashed_messages() %}
  {% if messages %}
	<div class="w3-panel w3-pale-yellow w3-border">
		<h3> Please correct the following errors </h3>
			<ol class="w3-ul">
				{% for message in messages %}
					<li> {{ message }} </li>
				{% endfor %}
			</ol>
	</div>	
  {% endif %}

<span id = "delete">
<form method="post" class="w3-container">
	<label for="id"><b>ID</b></label>
	<input type="number" value="{{ genre.Category_ID }}" name="id" min="1" disabled>
	<label for="category"><b>Category</b></label>
    <input id="category" type="text" value="{{ genre.Category_Name }}" name="category" required>
	<p><button class="w3-button w3-black" onclick="return confirm('You are about to edit Genre with ID {{ genre.Category_ID }}')" 
	type="submit">Save</button> <a id="cancel" class="bttn w3-button w3-black">Reset</a></p>
</form>

 <ul class="breadcrumb">
  <li><a href="{{ url_for('genres.index') }}">Genre List</a></li>
  <li><a href="{{ url_for('genres.create') }}"> Add New Category </a></li>
    <li><a href="#" onclick="deleteEntity('delete','{{ url_for('genres.delete',Id=genre.Category_ID) }}','{{ genre.Category_ID }}')">
	Delete Genre {{ genre.Category_Name }}</a></li>
</ul>

<span>
{% endblock %}