{{define "content"}}
<div class="card">
    <h2>Edit Bot: {{.Bot.Name}}</h2>
    {{if .Success}}<div class="alert alert-success">Bot updated successfully.</div>{{end}}
    {{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}

    <!-- Portrait Section -->
    <div style="margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; display: flex; align-items: center; gap: 1.5rem;">
        <div style="width: 128px; height: 128px; border-radius: 8px; overflow: hidden; background: #ddd; flex-shrink: 0;">
            {{if .Bot.PortraitURL}}
            <img src="{{.Bot.PortraitURL}}" alt="{{.Bot.Name}}" style="width: 100%; height: 100%; object-fit: cover;">
            {{else}}
            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 2rem;">&#9820;</div>
            {{end}}
        </div>
        <div>
            <p style="margin-bottom: 0.5rem; font-weight: 600;">Portrait (512x512 px)</p>
            <form method="POST" action="/admin/bots/portrait/{{.Bot.ID}}" enctype="multipart/form-data" style="display: flex; gap: 0.5rem; align-items: center;">
                <input type="file" name="portrait" accept=".png,.jpg,.jpeg,.webp" required style="font-size: 0.85rem;">
                <button type="submit" class="btn btn-primary">Upload</button>
            </form>
            <p style="margin-top: 0.3rem; color: #666; font-size: 0.8rem;">Accepts PNG, JPG, WebP. Will be served at {{.Bot.PortraitURL}}</p>
        </div>
    </div>

    <form method="POST" action="/admin/bots/edit/{{.Bot.ID}}">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" value="{{.Bot.Name}}">
            </div>
            <div class="form-group">
                <label>Name (Arabic)</label>
                <input type="text" name="name_ar" value="{{.Bot.NameAr}}" dir="rtl">
            </div>
            <div class="form-group">
                <label>Style</label>
                <input type="text" name="style" value="{{.Bot.Style}}">
            </div>
            <div class="form-group">
                <label>Style (Arabic)</label>
                <input type="text" name="style_ar" value="{{.Bot.StyleAr}}" dir="rtl">
            </div>
            <div class="form-group" style="grid-column: 1 / -1;">
                <label>Bio</label>
                <input type="text" name="bio" value="{{.Bot.Bio}}">
            </div>
            <div class="form-group" style="grid-column: 1 / -1;">
                <label>Bio (Arabic)</label>
                <input type="text" name="bio_ar" value="{{.Bot.BioAr}}" dir="rtl">
            </div>
            <div class="form-group">
                <label>Skill Level (0-20)</label>
                <input type="number" name="skill_level" value="{{.Bot.SkillLevel}}" min="0" max="20">
            </div>
            <div class="form-group">
                <label>Depth (1-30)</label>
                <input type="number" name="depth" value="{{.Bot.Depth}}" min="1" max="30">
            </div>
            <div class="form-group">
                <label>Contempt (-100 to 100)</label>
                <input type="number" name="contempt" value="{{.Bot.Contempt}}" min="-100" max="100">
            </div>
            <div class="form-group">
                <label>Blunder Chance (0-100%)</label>
                <input type="number" name="blunder_chance" value="{{printf "%.0f" (mul .Bot.BlunderChance 100)}}" min="0" max="100">
            </div>
            <div class="form-group">
                <label>Think Time Min (ms)</label>
                <input type="number" name="think_time_min" value="{{.Bot.ThinkTimeMin}}" min="0">
            </div>
            <div class="form-group">
                <label>Think Time Max (ms)</label>
                <input type="number" name="think_time_max" value="{{.Bot.ThinkTimeMax}}" min="0">
            </div>
            <div class="form-group">
                <label>ELO Min</label>
                <input type="number" name="elo_min" value="{{.Bot.ELOMin}}" min="0">
            </div>
            <div class="form-group">
                <label>ELO Max</label>
                <input type="number" name="elo_max" value="{{.Bot.ELOMax}}" min="0">
            </div>
        </div>
        <div style="margin-top: 1rem;">
            <button type="submit" class="btn btn-primary">Save Changes</button>
            <a href="/admin/bots" class="btn" style="margin-left:1rem;">Cancel</a>
        </div>
    </form>
</div>
{{end}}