<%- include('partials/html-head') %>

<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4; 
    }
    
    .card {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); 
        padding: 20px;
    }

    .btn-primary {
        background-color: #007BFF;
    }

    .btn-warning {
        background-color: #FFC107;
    }

    h1, h2 {
        font-weight: bold;
        color: #333; 
    }
</style>

<body class="container-fluid py-5">

    <div class="row justify-content-center">

        <!-- Update Profile Section -->
        <div class="col-md-6 mb-5 card">
            <h1 class="mb-4">Update your Profile Name</h1>

            <% for (var i = 0; i < profileData.length; i++) { %>
            <form method="POST" class="mb-3">
                <div class="mb-3">
                    <input type="hidden" id="devId" name="devId" value="<%= profileData[i]._id %>" />
                    <label for="devName" class="form-label">Developer Name</label>
                    <input type="text" class="form-control" id="devName" name="devName" value="<%= profileData[i].name %>" />
                </div>

                <button class="btn btn-primary me-2" type="submit" formaction="/updateProfile">Update Dev Name</button>
                <button class="btn btn-warning" type="submit" formaction="/deleteProfile">Delete Dev</button>
            </form>
            <% } %>
        </div>

        <!-- Insert New Profile Section -->
        <div class="col-md-6 card">
            <h2 class="mb-4">New dev here!</h2>

            <form action="/insertProfile" method="POST">
                <div class="mb-3">
                    <label for="newDevName" class="form-label">New Developer Name</label>
                    <input type="text" class="form-control" id="newDevName" name="newDevName" placeholder="Enter new dev name" />
                </div>
                <button class="btn btn-primary" type="submit">Insert New Dev Name</button>
            </form>
        </div>

    </div>

</body>
</html>
