 <!DOCTYPE html>
<html>
<head>
    <title>PyLFG Web Interface</title>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@1.3.0/dist/htmx.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/textual@latest/dist/textual.min.css">
</head>
<body>
    <div class="tabbed-section">
        <h1>Interactive Prompt</h1>
        <div class="tab-content">
            <input class="text-field" id="interactive-prompt" hx-post="/analyze" hx-target="#result" placeholder="Enter sentence or command">
            <div id="result"></div>
        </div>
    </div>
    <div class="tabbed-section">
        <h1>Production Rules</h1>
        <div class="tab-content">
            <div class="collapsible-section">
                <h2>Add/Edit Production Rule</h2>
                <div class="collapsible-content">
                    <input class="text-field" id="rule-input" hx-post="/add_rule" hx-target="#rule_list" placeholder="Enter production rule (e.g. NP → Det N {c-structure constraints})">
                    <button class="button" id="add-rule-button" hx-post="/add_rule" hx-target="#rule_list">Add Rule</button>
                    <button class="button" id="edit-rule-button" hx-post="/edit_rule" hx-target="#rule_list">Edit Rule</button>
                </div>
            </div>
            <div class="collapsible-section">
                <h2>Delete Production Rule</h2>
                <div class="collapsible-content">
                    <button class="button" id="delete-rule-button" hx-post="/delete_rule" hx-target="#rule_list">Delete Rule</button>
                </div>
            </div>
            <div class="collapsible-section">
                <h2>Production Rule List</h2>
                <div class="collapsible-content">
                    <ul id="rule_list"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="tabbed-section">
        <h1>Lexicon Entries</h1>
        <div class="tab-content">
            <div class="collapsible-section">
                <h2>Add/Edit Lexicon Entry</h2>
                <div class="collapsible-content">
                    <input class="text-field" id="lexicon-input" hx-post="/add_entry" hx-target="#lexicon_list" placeholder="Enter lexicon entry (e.g. cat.n {c-structure constraints})">
                    <button class="button" id="add-lexicon-button" hx-post="/add_entry" hx-target="#lexicon_list">Add Entry</button>
<button class="button" id="edit-lexicon-button" hx-post="/edit_entry" hx-target="#lexicon_list">Edit Entry</button>
</div>
</div>
<div class="collapsible-section">
<h2>Delete Lexicon Entry</h2>
<div class="collapsible-content">
<button class="button" id="delete-lexicon-button" hx-post="/delete_entry" hx-target="#lexicon_list">Delete Entry</button>
</div>
</div>
<div class="collapsible-section">
<h2>Lexicon Entry List</h2>
<div class="collapsible-content">
<ul id="lexicon_list"></ul>
</div>
</div>
</div>
</div>
<div class="tabbed-section">
<h1>Parse Tree</h1>
<div class="tab-content">
<div id="parse_tree"></div>
</div>
</div>
<div class="tabbed-section">
<h1>F-Structure</h1>
<div class="tab-content">
<div id="f_structure"></div>
</div>
</div>
<div class="tabbed-section">
<h1>E-Structure</h1>
<div class="tab-content">
<div id="e_structure"></div>
</div>
</div>
</body>
</html>