{% extends "base.html" %}

{% block title %}Add Bot - Bot Master{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Add New Bot</h1>
</div>

<div class="card" style="max-width: 600px;">
    <form method="POST">
        <div class="form-group">
            <label for="name">Bot Name *</label>
            <input type="text" id="name" name="name" class="form-control" required placeholder="e.g., AeThex Main Bot">
        </div>
        
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" class="form-control" placeholder="What does this bot do?"></textarea>
        </div>
        
        <div class="form-group">
            <label for="bot_type">Bot Type</label>
            <select id="bot_type" name="bot_type" class="form-control">
                <option value="discord">Discord Bot</option>
                <option value="telegram">Telegram Bot</option>
                <option value="slack">Slack Bot</option>
                <option value="other">Other</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="health_endpoint">Health Check Endpoint</label>
            <input type="url" id="health_endpoint" name="health_endpoint" class="form-control" placeholder="https://your-bot.host.com:8044/health">
            <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
                The URL where your bot exposes its health/status endpoint
            </small>
        </div>
        
        <div class="form-group">
            <label for="admin_token">Admin Token (Optional)</label>
            <input type="password" id="admin_token" name="admin_token" class="form-control" placeholder="Bearer token for authenticated endpoints">
            <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
                Used for accessing protected bot management endpoints
            </small>
        </div>
        
        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn btn-primary">Add Bot</button>
            <a href="/" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}