{% extends "master.html" %}
{% block content %}
{% load static %}

<style>
    .container {
        width: 500px;
        margin: 50px auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 30px;
    }

    h2 {
        text-align: center;
        color: #333;
    }

    form {
        display: flex;
        flex-direction: column;
    }

    label {
        margin-top: 15px;
        font-weight: bold;
        color: #555;
    }

    input[type="text"],
    textarea,
    select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 5px;
    }

    textarea {
        resize: vertical;
        min-height: 80px;
    }

    input[readonly] {
        background-color: #f0f0f0;
    }

    button {
        margin-top: 20px;
        padding: 10px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    button:hover {
        background-color: #45a049;
    }
</style>

<div class="container">
    <h2>Update Item</h2>
    <form method="POST">
        {% csrf_token %}

        {% comment %} value >
            for text > value="{{data.title}}
            for textarea > {{data.description}}
            for date > value="{{data.due_date|date:'Y-m-d'}}
            for chaice > <option value="Pending" {% if data.status == "Pending" %}selected{% endif %}>Pending</option>
            for img > <img src="/{{data.title}}" alt="img"> 
            
            update page a 'required' thakbe na input filed a {% endcomment %}

        <label for="title">Title</label>
        <input type="text" id="title" name="title" maxlength="100" value="{{data.title}}">

        <label for="description">Description</label>
        <textarea id="description" name="description">{{data.description}}</textarea>

        <label for="status">Status</label>
        <select id="status" name="status">
            <option value="Pending" {% if data.status == "Pending" %}selected{% endif %}>Pending</option>
            <option value="In Progress" {% if data.status == "In Progress" %}selected{% endif %}>In Progress</option>
            <option value="Completed" {% if data.status == "Completed" %}selected{% endif %}>Completed</option>
        </select><br>

        {% comment %} <img src="/{{data.title}}" alt="img">
        <input type="file" id="img" name="img"> {% endcomment %}

        <button type="submit">Update</button>
        
    </form>
</div>
{% endblock content %}