{% extends "base.html" %}
{% block title %}Dashboard — FabledNetMon{% endblock %}
{% block content %}
<h1 style="margin-bottom:1.5rem;color:#c0c0ff;">Dashboard</h1>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;">
    <div class="card">
        <h3 style="color:#8080ff;margin-bottom:0.75rem;">Ping Monitor</h3>
        <p style="color:#606080;font-size:0.9rem;">
            <a href="/hosts/" style="color:#a0a0ff;">Manage hosts</a> to begin monitoring.
        </p>
    </div>
    <div class="card">
        <h3 style="color:#8080ff;margin-bottom:0.75rem;">DNS Monitor</h3>
        <p style="color:#606080;font-size:0.9rem;">
            Enable DNS monitoring on a <a href="/hosts/" style="color:#a0a0ff;">host</a>.
        </p>
    </div>
    <div class="card">
        <h3 style="color:#8080ff;margin-bottom:0.75rem;">Alerts</h3>
        <p style="color:#606080;font-size:0.9rem;">
            <a href="/alerts/" style="color:#a0a0ff;">Configure alert rules</a> against any metric.
        </p>
    </div>
    <div class="card">
        <h3 style="color:#8080ff;margin-bottom:0.75rem;">Ansible</h3>
        <p style="color:#606080;font-size:0.9rem;">
            <a href="/ansible/browse" style="color:#a0a0ff;">Browse playbooks</a> or view
            <a href="/ansible/" style="color:#a0a0ff;">run history</a>.
        </p>
    </div>
</div>
{% endblock %}