{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Workflows</h1>
  <table class="table align-items-center mb-0">
    <tr>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Active</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Edit</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Delete</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Rename</th>
    </tr>
    {% for row in rows %}
    <tr>
      <td>
        <input type="checkbox" class="active-toggle" data-id="{{ row.id }}" value="1" {% if row.active %}checked{% endif %}>
      </td>
      <td>{{ row.name }}</td>
      <td><a class="btn btn-default btn-sm" href="/op_workflow_designer?id={{ row.id }}">Edit</a></td>
      <td>
        <form method="post">
          <input type="hidden" name="action" value="delete">
          <input type="hidden" name="id" value="{{ row.id }}">
          <button class="btn btn-default btn-sm" type="submit">Delete</button>
        </form>
      </td>
      <td>
        <button class="btn btn-default btn-sm rename-btn" type="button" data-id="{{ row.id }}" data-name="{{ row.name }}">Rename</button>
      </td>
    </tr>
    {% endfor %}
    <tr>
      <form method="post">
        <td>
          <input type="hidden" name="action" value="add">
          <input type="hidden" name="active" value="0">
          <input type="checkbox" name="active" value="1">
        </td>
        <td><input class="form-control" type="text" name="name"></td>
        <td colspan="3">
          <button class="btn btn-primary btn-sm" type="submit">Add</button>
        </td>
      </form>
    </tr>
  </table>
  <script>
    $(function() {
      $('.rename-btn').on('click', function() {
        var id = $(this).data('id');
        var currentName = $(this).data('name');
        var newName = prompt('Enter new workflow name:', currentName);
        if (newName) {
          $.post('/op_workflows', { action: 'rename', id: id, new_name: newName }, function() {
            location.reload();
          });
        }
      });

      $('.active-toggle').on('change', function() {
        var id = $(this).data('id');
        var active = $(this).is(':checked') ? 1 : 0;
        $.post('/op_workflows', { action: 'toggle', id: id, active: active });
      });
    });
  </script>
</main>
{% endblock %}