<div class="card mb-4">
  <div class="card-header bg-dark text-white">Regeln</div>
  <div class="card-body">

    <!-- Regel hinzufügen -->
    <form action="/ui/rule" method="POST" class="mb-3">
      <div class="input-group">
        <input type="text" name="name" class="form-control" placeholder="Regelname" required>
        <input type="text" name="actionTopic" class="form-control" placeholder="Aktion Topic" required>
        <input type="text" name="actionPayload" class="form-control" placeholder="Aktion Payload" required>
        <button class="btn btn-success">+</button>
      </div>
    </form>

    <% (ui.rules || []).forEach(rule => { %>
      <div class="border p-2 mb-3 bg-light text-dark">

        <div class="d-flex justify-content-between align-items-center">
          <b><%= rule.name %></b>

          <div>
            <button class="btn btn-sm btn-warning me-2" onclick="openEditRuleModal(<%= rule.id %>)">Bearbeiten</button>

            <form action="/ui/rule/<%= rule.id %>?_method=DELETE" method="POST" class="d-inline">
              <button class="btn btn-sm btn-danger">Löschen</button>
            </form>
          </div>
        </div>

        <div class="small text-muted">
          Aktion: <%= rule.actionTopic %> → <%= rule.actionPayload %>
        </div>

        <hr>

        <% ui.conditions.filter(c => c.ruleId === rule.id).forEach(cond => { %>
          <div class="p-2 mb-2 bg-white border">
            <code><%= cond.sourceTopic %></code>
            JSON: <%= cond.jsonPath || "-" %>  
            <b><%= cond.operator %></b>
            <%= cond.expectedValue %>
          </div>
        <% }) %>

        <!-- Bedingung hinzufügen -->
        <form action="/ui/rule/<%= rule.id %>/condition" method="POST" class="mt-2">
          <div class="input-group">
            <input type="text" name="sourceTopic" class="form-control" placeholder="MQTT Topic" required>
            <input type="text" name="jsonPath" class="form-control" placeholder="JSON-Feld (optional)">
            <select name="operator" class="form-select">
              <option value="=">=</option>
              <option value=">">></option>
              <option value="<"><</option>
            </select>
            <input type="text" name="expectedValue" class="form-control" placeholder="Wert" required>
            <button class="btn btn-primary">+</button>
          </div>
        </form>

      </div>
    <% }) %>

  </div>
</div>

<!-- EDIT RULE MODAL -->
<div class="modal fade" id="editRuleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <form id="editRuleForm" method="POST">
        <input type="hidden" name="_method" value="PUT">

        <div class="modal-header">
          <h5 class="modal-title">Regel bearbeiten</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <label class="form-label">Regelname</label>
          <input type="text" id="editRuleName" name="name" class="form-control" required>

          <label class="form-label mt-2">Aktion Topic</label>
          <input type="text" id="editRuleTopic" name="actionTopic" class="form-control" required>

          <label class="form-label mt-2">Aktion Payload</label>
          <input type="text" id="editRulePayload" name="actionPayload" class="form-control" required>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary">Speichern</button>
        </div>

      </form>

    </div>
  </div>
</div>
