<!DOCTYPE html>
{% load static %}
{% csrf_token %}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pin Map</title>
  <link rel="stylesheet" href="{% static 'css/uikit.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/map.css' %}">
  
  <style>
    /* Quick fix if static is not configured: place CSS here if needed */
  </style>
</head>
<body>
    <div class="uk-container">
        <h2>Interactive Map with Pins</h2>
        <div id="map-container" class="custom-map">
            <div id="map-viewport">
                <img src="{% static 'map.png' %}" id="main-map" alt="Map" draggable="false"/>
                <div id="pins"></div>
            </div>
        </div>
    </div>
    <div class="uk-container uk-margin-large-top">
        <h4 class="uk-heading-divider">All Pins</h4>
        <div class="uk-overflow-auto">
            <table id="pins-table" class="uk-table uk-table-divider uk-table-hover uk-table-small uk-table-middle">
            <thead>
                <tr>
                <th>#</th>
                <th>Label</th>
                <th>URL</th>
                <th>X (%)</th>
                <th>Y (%)</th>
                <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- Rows injected by JS -->
            </tbody>
            </table>
        </div>
    </div>

    <div id="add-pin-modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body uk-border-rounded">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h3 class="uk-modal-title uk-flex uk-flex-middle">
            <span uk-icon="icon: location; ratio: 1.2" class="uk-margin-small-right"></span>
            Add a Map Pin
            </h3>
            <form id="add-pin-form" class="uk-form-stacked">
            <div class="uk-margin">
                <label class="uk-form-label" for="pin-label">Label</label>
                <div class="uk-form-controls">
                <input class="uk-input uk-border-pill" id="pin-label" type="text" placeholder="e.g. Castle Gates" required>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="pin-url">Link URL</label>
                <div class="uk-form-controls">
                <input class="uk-input uk-border-pill" id="pin-url" type="text" placeholder="/castle/" required>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="pin-url">Pin Type</label>
                <div class="uk-form-controls">
                <input class="uk-input uk-border-pill" id="pin-type" type="text" placeholder="/castle/" required>
                </div>
            </div>
            <input type="hidden" id="pin-x">
            <input type="hidden" id="pin-y">
            <div class="uk-flex uk-flex-between uk-margin-top">
                <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                <button class="uk-button uk-button-primary uk-border-pill" type="submit">
                <span uk-icon="plus"></span> Add Pin
                </button>
            </div>
            </form>
        </div>
    </div>
</body>
<script src="{% static 'js/uikit.min.js' %}"></script>
<script src="{% static 'js/uikit-icons.min.js' %}"></script>
<script src="{% static 'js/map.js' %}"></script>
</html>