{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'app_home:prototypes_index' %}">{% translate "UI Prototypes" %}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ prototype.title }}</li>
  </ol>
</nav>
<h3>{{ prototype.title }}</h3>
<p class="text-muted">{{ prototype.description }}</p>
{% endblock %}


{% block content %}

<p class="text-muted">
  {% translate "Static layout reference - not live data. See the real Home page for the actual DASHBOARD_CONTENT-driven dashboard." %}
</p>

<div class="cv-proto-dashboard-section mb-4">
  <h5 class="cv-proto-dashboard-section-title">Assets</h5>
  <div class="cv-proto-dashboard-grid">
    <a href="#" class="cv-proto-dashboard-card">
      <i class="fa fa-laptop fa-2x"></i>
      <span class="cv-proto-dashboard-label">Laptops</span>
      <span class="cv-proto-dashboard-count">42</span>
    </a>
    <a href="#" class="cv-proto-dashboard-card">
      <i class="fa fa-hospital-o fa-2x"></i>
      <span class="cv-proto-dashboard-label">Sites</span>
      <span class="cv-proto-dashboard-count">12</span>
    </a>
    <a href="#" class="cv-proto-dashboard-card">
      <i class="fa fa-users fa-2x"></i>
      <span class="cv-proto-dashboard-label">Groups</span>
      <span class="cv-proto-dashboard-count">7</span>
    </a>
  </div>
</div>

<div class="cv-proto-dashboard-section mb-4">
  <h5 class="cv-proto-dashboard-section-title">Tools</h5>
  <div class="cv-proto-dashboard-grid">
    <a href="#" class="cv-proto-dashboard-card">
      <i class="fa fa-plus fa-2x"></i>
      <span class="cv-proto-dashboard-label">Import</span>
    </a>
    <a href="#" class="cv-proto-dashboard-card">
      <i class="fa fa-wrench fa-2x"></i>
      <span class="cv-proto-dashboard-label">Configuration</span>
    </a>
  </div>
</div>

{% endblock %}