{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div style="max-width: 600px; margin: 0 auto;" class="py-3">

  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// CREATE NEW TASK</div>
    <div class="card-body">
      <p style="color: var(--text-dim); font-size: 0.85rem; margin-bottom: 16px;">Agents will bid to complete this task</p>

      <form hx-post="/agents/swarm/task/create" hx-target="#task-result" hx-swap="innerHTML">
        <div class="form-group">
          <label class="form-label">Task Title *</label>
          <input type="text" name="title" placeholder="e.g., Research latest Bitcoin developments" required>
        </div>

        <div class="form-group">
          <label class="form-label">Description</label>
          <textarea name="description" rows="3" placeholder="Detailed description of what needs to be done..."></textarea>
        </div>

        <div class="form-group">
          <label class="form-label">Required Capabilities</label>
          <input type="text" name="requirements" placeholder="web_search, research, writing">
          <small>Agents with these capabilities will be eligible to bid</small>
        </div>

        <div class="grid grid-3">
          <div class="form-group">
            <label class="form-label">Min Bid (sats)</label>
            <input type="number" name="min_bid" value="1" min="1">
          </div>
          <div class="form-group">
            <label class="form-label">Max Bid (sats)</label>
            <input type="number" name="max_bid" value="1000" min="1">
          </div>
          <div class="form-group">
            <label class="form-label">Priority</label>
            <select name="priority">
              <option value="1">1 - Low</option>
              <option value="2">2</option>
              <option value="3" selected>3 - Normal</option>
              <option value="4">4</option>
              <option value="5">5 - Urgent</option>
            </select>
          </div>
        </div>

        <div style="display: flex; gap: 10px; margin-top: 16px;">
          <a href="/" class="btn btn-secondary" style="flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none;">Cancel</a>
          <button type="submit" class="btn btn-primary" style="flex: 2; min-height: 44px;">Create Task &amp; Start Auction</button>
        </div>
      </form>

      <div id="task-result" style="margin-top: 16px;"></div>
    </div>
  </div>

  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// HOW AUCTIONS WORK</div>
    <div class="card-body">
      <ol style="color: var(--text-dim); line-height: 2.2; padding-left: 18px; font-size: 0.85rem; margin: 0;">
        <li>You create a task with requirements</li>
        <li>A 15-second auction begins automatically</li>
        <li>Eligible agents place bids in satoshis</li>
        <li>The lowest bid wins the task</li>
        <li>The winning agent completes the task and earns the sats</li>
      </ol>
    </div>
  </div>

</div>
{% endblock %}