{% extends "base.html" %}
{% block title %}Add Project{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Add Project</h2>

    <div class="card p-4 shadow-sm">
        <form method="POST">
            {% csrf_token %}

            <div class="row mt-3">
                <div class="col-md-6">
                    <label class="form-label">Project Code</label>
                    {{ form.project_code }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Project Title</label>
                    {{ form.project_title }}
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <label class="form-label">Description</label>
                    {{ form.project_description }}
                </div>
                
            </div>
             <div class="row mt-3">
                
                <div class="col-md-6">
                    <label class="form-label">Awarding Department</label>
                    {{ form.awarding_department }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Site Location</label>
                    {{ form.site_location }}
                </div>
            </div>
            <div class="row mt-3">
                
                <div class="col-md-6">
                    <label class="form-label">LOI Date</label>
                    <input type="date" name="loi_date" id="loi_date" class="form-control">

                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-6">
                    <label class="form-label">Commencment Date</label>
                    
                    <input type="date" name="commencement_date" id="commencement_date" class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Completion Date</label>
                    <input type="date" name="completion_date" id="completion_date" class="form-control">
                    
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label class="form-label">Work Award Amount</label>
                    {{ form.work_award_amount }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">% Above/Below Estimate</label>
                    {{ form.percent_estimate }}
                </div>
            </div>

            <div class="text-center mt-4">
                <button type="submit" class="btn btn-success">Save Project</button>
                <a href="{% url 'project_list' %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<style>
    .form-label {
        font-weight: bold;
    }
    input, select, textarea {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    textarea {
        resize: vertical;
        height: 80px;
    }
    .btn {
        width: 150px;
    }
</style>
{% endblock %}