{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!--Available tools section-->
        <h2>Available Benchmarking Tools</h2>

        <!-- Server-side rendered tools -->
        {% if tools %}
        <div class="row">
            {% for tool_name, tool in tools.items() %}
            <div class="col-md-4 mb-3">
                <div class="card {% if tool.available %}border-success{% else %}border-secondary{% endif %}">
                    <div class="card-body">
                        <h5 class="card-title">{{ tool.name }}</h5>
                        <p class="card-text">
                            {% if tool.available %}
                            <span class="badge bg-success">Available</span>
                            {% if tool.version %}
                            <small class="text-muted">{{ tool.version }}</small>
                            {% endif %}
                            {% else %}
                            <span class="badge bg-secondary">Not Installed</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!--Available drives section-->
        <h2 class="mt-5">Available Drives</h2>
        <p class="text-muted">
            <i class="bi bi-info-circle"></i>
            Mounted drives are grayed out and cannot be benchmarked.
        </p>
        <div id="drives-list" 
             hx-get="/api/v1/drives" 
             hx-trigger="load"
             hx-target="#drives-content"></div>
        <div id="drives-content" class="row"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/main.js"></script>
{% endblock %}