{{ define "content" }}
<div class="page-header action-bar">
    <h1>Locations</h1>
    <button class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem; font-size: 0.95rem;" onclick="openLocationModal()">
        Add Location
    </button>
</div>

<div class="table-container">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th style="text-align: right;">Actions</th>
        </tr>
        </thead>
        <tbody id="locations-table-body">
        <tr><td colspan="2" class="table-loader">Loading locations...</td></tr>
        </tbody>
    </table>
</div>

<div id="location-modal" class="modal">
    <div class="modal-content">
        <h2 id="location-modal-title">New Location</h2>
        <form id="location-form" onsubmit="saveLocation(event)">
            <input type="hidden" id="location-id">
            <div class="form-group">
                <input type="text" id="location-name" placeholder="Location Name" required>
            </div>
            <div class="button-group">
                <button type="submit" class="btn btn-primary">Save Location</button>
                <button type="button" class="btn btn-secondary" onclick="closeModal('location-modal')">Cancel</button>
            </div>
        </form>
    </div>
</div>
{{ end }}