<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flow Builder</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto p-4 max-w-4xl">
      <h1 class="text-3xl font-bold text-center mb-6">Flow Builder</h1>

      <!-- Create Flow Section -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Create New Flow</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input
            type="text"
            id="flow-name"
            placeholder="Flow Name"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            type="text"
            id="flow-description"
            placeholder="Description"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <button
          id="create-flow-btn"
          class="mt-4 bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
        >
          Create Flow
        </button>
      </div>

      <!-- Add Task Section -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Add Task to Flow</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <select
            id="flow-select"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Select Flow</option>
          </select>
          <select
            id="action-type"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Select Action</option>
            <option value="send_test_mail">Send Test Mail</option>
            <option value="http_get_request">HTTP GET Request</option>
            <option value="mysql_select">MySQL Select</option>
            <option value="drive_upload">Drive Upload</option>
          </select>
          <input
            type="text"
            id="task-input"
            placeholder="Input Data"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            type="number"
            id="order-index"
            placeholder="Order"
            min="0"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <button
          id="add-task-btn"
          class="mt-4 bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600"
        >
          Add Task
        </button>
      </div>

      <!-- Flow Details Section -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Flow Details</h2>
        <div id="flow-details" class="space-y-4">
          <!-- Flow details will be populated here -->
        </div>
      </div>

      <!-- Execute Flow Section -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Execute Flow</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <select
            id="execute-flow-select"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Select Flow to Execute</option>
          </select>
          <input
            type="text"
            id="execute-payload"
            placeholder="Payload (optional)"
            class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div class="mt-4 space-x-4">
          <button
            id="execute-btn"
            class="bg-purple-500 text-white px-6 py-2 rounded hover:bg-purple-600"
          >
            Execute Flow
          </button>
          <button
            id="webhook-btn"
            class="bg-orange-500 text-white px-6 py-2 rounded hover:bg-orange-600"
          >
            Get Webhook URL
          </button>
        </div>
        <div id="execution-results" class="mt-4 p-4 bg-gray-100 rounded hidden">
          <!-- Execution results will be shown here -->
        </div>
      </div>
    </div>

    <script src="/flow.js"></script>
  </body>
</html>
