{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Feature Detail</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'css/uikit.min.css' %}">
</head>
<body>
<div class="uk-container uk-padding">
    <h1 class="uk-text-center uk-margin">Feature Detail/Edit<br><span class="subtitle">{{ feature.feature_name }}</span></h1>
    <form id="feature-detail-form"
          hx-post="/{{ system }}/feature/{{ feature.id }}"
          hx-trigger="submit"
          hx-target="#feature-detail-form"
          hx-swap="outerHTML"
          method="POST" autocomplete="off">
        {% csrf_token %}
        <div class="uk-margin">
            <label class="uk-form-label" for="feature_name">Name</label>
            <input class="uk-input" id="feature_name" name="feature_name" type="text" value="{{ feature.feature_name }}">
        </div>
        <div class="uk-margin">
            <label class="uk-form-label" for="feature_description">Description</label>
            <textarea class="uk-textarea" id="feature_description" name="feature_description" rows="3">{{ feature.feature_description }}</textarea>
        </div>
        <div class="uk-margin">
            <label class="uk-form-label">Feature Requirements</label>
            <table class="uk-table reqtable" id="reqtable">
                <thead>
                    <tr>
                        <th>Attribute</th><th>Condition</th><th>Value</th>
                    </tr>
                </thead>
                <tbody>
                  {% for req in feature.feature_requirements %}
                    <tr>
                      <td><input class="uk-input" type="text" value="{{ req.attribute|default:req.property }}"></td>
                      <td>
                        <select class="uk-select">
                          <option value="==" {% if req.condition == "==" %}selected{% endif %}>=</option>
                          <option value=">=" {% if req.condition == ">=" %}selected{% endif %}>&ge;</option>
                          <option value="<=" {% if req.condition == "<=" %}selected{% endif %}>&le;</option>
                          <option value="!=" {% if req.condition == "!=" %}selected{% endif %}>&ne;</option>
                        </select>
                      </td>
                      <td><input class="uk-input" type="text" value="{{ req.value }}"></td>
                    </tr>
                  {% endfor %}
                </tbody>
            </table>
            <button type="button" class="uk-button uk-button-default uk-button-xsmall add-row-btn" onclick="addFeatureRequirement()">Add Requirement</button>
        </div>
        <div>
            <h3>Operations
                <button id="add-operation-btn" type="button" class="uk-button uk-button-primary uk-button-small uk-margin-small-left">
                    <span uk-icon="icon: plus"></span> Add Operation
                </button>
            </h3>
            <div id="operations-list"></div>
        </div>
        <div class="uk-margin">
            <button class="uk-button uk-button-primary uk-width-1-1">Save</button>
        </div>
    </form>
</div>
<script src="{% static 'js/uikit.min.js' %}"></script>
<script src="{% static 'js/uikit-icons.min.js' %}"></script>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
// Prepopulate window.operations from feature.feature_data in the template context
window.operations = {{ feature.feature_data.operations|safe }};
// -- Copy the relevant JS from your test_feature.html here --
// Ensure you also prepopulate the requirements table as above
// Now your UI can work in edit/detail mode with all functionality
</script>
</body>
</html>
