Show the number of remaining available checks under "Add Check" button

when 10 or less remaining.

hc/front/views.py

@@ -71,7 +71,7 @@ def my_checks(request):
         "tags": pairs,
         "ping_endpoint": settings.PING_ENDPOINT,
         "timezones": all_timezones,
-        "can_add_more": len(checks) < request.team.check_limit,
+        "num_available": request.team.check_limit - len(checks),
         "sort": request.profile.sort
     }
 

static/css/my_checks.css

@@ -163,3 +163,9 @@
     border-top: 1px solid #ddd;
 }
 
+.add-check-note {
+    color: #888;
+    text-align: center;
+    margin-top: 10px;
+    font-size: 12px;
+}

templates/front/my_checks.html

@@ -36,11 +36,16 @@
 </div>
 <div class="row">
     <div class="col-sm-12">
-        {% if can_add_more %}
-        <form method="post" action="{% url 'hc-add-check' %}" class="text-center">
-            {% csrf_token %}
-            <input type="submit" class="btn btn-primary btn-lg" value="Add Check">
-        </form>
+        {% if num_available > 0 %}
+            <form method="post" action="{% url 'hc-add-check' %}" class="text-center">
+                {% csrf_token %}
+                <input type="submit" class="btn btn-primary btn-lg" value="Add Check">
+            </form>
+            {% if num_available <= 10 %}
+            <div class="add-check-note">
+                ({{ checks|length }} in use, {{ num_available }} available)
+            </div>
+            {% endif %}
         {% else %}
             <div class="alert alert-info">
                 <strong>Check limit reached.</strong>