{% extends "admin_coinbase_base.html" %} 
{# Create admin_coinbase_base.html similar to admin_base.html, just change nav links if needed #}

{% block title %}Manage Coinbase Edicts{% endblock %}

{% block content %}
    <div class="form-section">
        <h2>Add New Coinbase Edict (Parent Element Targeting)</h2>
        <p><em>Use this form to define rules that target a parent HTML element and replace its content. This is for sites like Coinbase where text may be fragmented across multiple child elements.</em></p>
        <form action="{{ url_for('admin_coinbase_view_rules') }}" method="POST"> {# POSTs to itself to add rule #}
            <div>
                <label for="description_adv">Description (e.g., Coinbase EUR Balance Override):</label>
                <input type="text" id="description_adv" name="description" required placeholder="Briefly describe this edict's purpose">
            </div>
            <div>
                <label for="url_patterns_str_adv">URL Patterns (comma-separated, e.g., <code>*://*.coinbase.com/assets*</code>):</label>
                <input type="text" id="url_patterns_str_adv" name="url_patterns_str" required placeholder="*://*.coinbase.com/specific-page/*">
            </div>
            
            <fieldset style="border:1px solid #ccc; padding:10px 15px; margin-top:15px; margin-bottom:15px;">
                <legend style="font-weight:bold; padding:0 5px;">Manipulation Details (Targets one parent element)</legend>
                <div>
                    <label for="parent_selector_adv">Parent CSS Selector (for the element whose content will be replaced):</label>
                    <input type="text" id="parent_selector_adv" name="parent_selector" required placeholder="e.g., h3.balance-class, #uniqueBalanceID">
                </div>
                <div>
                    <label for="validation_regex_adv">Validation Regex (Optional: applied to parent's textContent before replacement):</label>
                    <input type="text" id="validation_regex_adv" name="validation_regex" placeholder="e.g., ^€\d{1,3}(?:[.,]\d{3})*(?:\.\d{2})$">
                </div>
                <div>
                    <label for="replacement_type_adv">Replacement Type:</label>
                    <select id="replacement_type_adv" name="replacement_type">
                        <option value="replace_text_content" selected>Replace Text Content (Safer - injects plain text)</option>
                        <option value="replace_inner_html">Replace Inner HTML (Allows HTML - riskier, can break site)</option>
                    </select>
                </div>
                <div>
                    <label for="new_content_adv">New Content (Text or HTML to inject):</label>
                    <textarea id="new_content_adv" name="new_content" rows="3" required placeholder="e.g., € [VALUE REVISED] or <span style='color:red;'>ALERT</span>"></textarea>
                </div>
                <div>
                    <label for="pre_hide_selector_adv">CSS Selector to Pre-Hide (Optional, often same as Parent Selector):</label>
                    <input type="text" id="pre_hide_selector_adv" name="pre_hide_selector" placeholder="e.g., h3.balance-class (for flicker reduction)">
                </div>
            </fieldset>
            
            <div>
                <label><input type="checkbox" name="is_active" value="on" checked> Active Edict</label>
            </div>
            <div>
                <label><input type="checkbox" name="persistent_mutation_observer" value="on" checked> Use Persistent Mutation Observer (Essential for dynamic content)</label>
            </div>
            <button type="submit">Add Advanced Coinbase Edict</button>
        </form>
    </div>

    <h2>Current Coinbase Edicts</h2>
    {% if edicts %}
    <table>
        <thead>
            <tr>
                <th>ID / Description</th>
                <th>URL Patterns</th>
                <th>Manipulations (Parent Targeting)</th>
                <th>Active</th>
                <th>Persistent Obs.</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for rule in edicts %}
            <tr>
                <td><strong>{{ rule.id }}</strong><br><small>{{ rule.description | default('N/A', true) }}</small></td>
                <td><pre>{{ rule.url_patterns | join('\n') }}</pre></td>
                <td>
                    {% if rule.manipulations %}
                    <ul class="replacements-list"> {# Reusing class name, style might need adjustment #}
                    {% for manip in rule.manipulations %}
                        <li>
                            <strong>Parent Selector:</strong> <code>{{ manip.parent_selector }}</code><br>
                            {% if manip.validation_regex %}
                            Val. Regex: /<code>{{ manip.validation_regex }}</code>/<br>
                            {% endif %}
                            Type: <code>{{ manip.replacement_type }}</code><br>
                            New Content: <pre style="max-height:60px; background:#f0f0f0;">{{ manip.new_content }}</pre>
                            {% if manip.pre_hide_selector %}
                            Pre-Hide: <code>{{ manip.pre_hide_selector }}</code><br>
                            {% endif %}
                        </li>
                    {% else %}
                        <li>No manipulations defined.</li>
                    {% endfor %}
                    </ul>
                    {% else %}
                    No manipulations defined.
                    {% endif %}
                </td>
                <td>{{ 'Yes' if rule.is_active else 'No' }}</td>
                <td>{{ 'Yes' if rule.persistent_mutation_observer else 'No' }}</td>
                <td>
                    <form action="{{ url_for('admin_coinbase_toggle_rule', rule_id=rule.id) }}" method="POST" style="display:inline-block; margin-bottom:5px;">
                        <button type="submit" class="toggle-btn">{{ 'Deactivate' if rule.is_active else 'Activate' }}</button>
                    </form>
                    <br>
                    <form action="{{ url_for('admin_coinbase_delete_rule', rule_id=rule.id) }}" method="POST" style="display:inline-block;">
                        <button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete edict {{ rule.id }}?');">Delete</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>No Coinbase Edicts currently inscribed in this Lexicon.</p>
    {% endif %}
{% endblock %}