{% extends "base.html" %}
{% block title %}New monitor{% endblock %}
{% block content %}
<div class="crumb"><a href="/app">Monitors</a> / New</div>
<h1>What do you want to watch?</h1><p class="sub">Pick a type. You can change everything later.</p>
<div class="typegrid" style="grid-template-columns:repeat(auto-fill,minmax(250px,1fr))">
{% for key, v in modes.items() %}
<a class="typecard" href="/app/monitors/new?mode={{ key }}"><span class="ic">{{ v[2] }}</span><b>{{ v[0] }}</b><span>{{ v[1] }}</span>{% if key == 'flow' and plan.flows <= 1 %}<span class="pill brand" style="margin-top:8px">{{ plan.flows }} on Free</span>{% endif %}</a>
{% endfor %}
</div>
{% endblock %}