{% 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>Add Item</h2>
    <form method="POST">
        {% csrf_token %}

        <label for="title">Title</label>
        <input type="text" id="title" name="title" maxlength="100" required>

        <label for="description">Description</label>
        <textarea id="description" name="description"></textarea>

        <!-- jodi all add korte chai -->
        <label for="status">Status</label>
        <select id="status" name="status" required>
            <option value="pending">Pending</option>
            <option value="inProgress">In Progress</option>
            <option value="completed">Completed</option>
        </select>

        <!-- jodi all je kono ekta lage like only 'pedning' 
        taile eita dekha i jabe na -->
        
        <!-- <label for="status">Status</label>
        <select id="status" name="status" required>
            <option value="pending">Pending</option>
            <option value="inProgress">In Progress</option>
            <option value="completed">Completed</option>
        </select> -->

        <!-- 'update at', 'create at', 'foren key' ei gulo add hobe na
        <label for="updated_at">Updated At</label>
        <input type="text" id="updated_at" name="updated_at" readonly value="{{ toDo.updated_at|default:'' }}"> -->

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