{{define "content"}}
<div class="card">
    <h2>Bots</h2>
    <p style="margin-bottom: 1rem;"><a href="/admin/bots/create" class="btn btn-success">+ Create Bot</a></p>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Style</th>
                <th>ELO</th>
                <th>Skill</th>
                <th>Depth</th>
                <th>Blunder %</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .Bots}}
            <tr>
                <td>
                    <div style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #eee;">
                        {{if .PortraitURL}}
                        <img src="{{.PortraitURL}}" alt="{{.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;">&#9820;</div>
                        {{end}}
                    </div>
                </td>
                <td>
                    <strong>{{.Name}}</strong><br>
                    <span style="color: #666; font-size: 0.8rem;" dir="rtl">{{.NameAr}}</span>
                </td>
                <td>
                    {{.Style}}<br>
                    <span style="color: #666; font-size: 0.8rem;" dir="rtl">{{.StyleAr}}</span>
                </td>
                <td>{{.ELOMin}}-{{.ELOMax}}</td>
                <td>{{.SkillLevel}}</td>
                <td>{{.Depth}}</td>
                <td>{{printf "%.0f" (mul .BlunderChance 100)}}%</td>
                <td>
                    <a href="/admin/bots/edit/{{.ID}}" class="btn btn-primary">Edit</a>
                    <form method="POST" action="/admin/bots/delete/{{.ID}}" style="display:inline;" onsubmit="return confirm('Delete this bot?')">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>
{{end}}