<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeoSystem</title>
    <link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
    <div class="navbar">
        <img src="../assets/images/Logo.png" alt="Logo">
        <button class="logout-button" onclick="logout()">Logout</button>
    </div>

    <div class="container">
        <div class="side-container">
            <button onclick="mapButton()">Location</button>
            <select id="locationDropdown" style="display:none;" onchange="selectLocation()">
                <option value="MLUC">MLUC</option>
                <option value="NLUC">NLUC</option>
                <option value="SLUC">SLUC</option>
            </select>
            <button onclick="addButton()">Add</button>
            <button onclick="editMode()">Edit</button>
            <button onclick="moveMode()">Move</button>
            <button onclick="removeButton()">Remove</button>
            <button onclick="save()" id="saveButton">Save</button>
        </div>
        <div class="main-container" id="mainContainer">
            <img id="map" src="/assets/images/MLUC.png" style="width: 100%; height: auto;" />
        </div>
    </div>

    <script src="../assets/js/home.js"></script>
</body>
</html>