{% 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 %}

<div class="card mb-4">
  <div class="card-header">{% translate "Typography" %}</div>
  <div class="card-body">
    <h1>{% translate "Heading 1" %}</h1>
    <h2>{% translate "Heading 2" %}</h2>
    <h3>{% translate "Heading 3" %}</h3>
    <h4>{% translate "Heading 4" %}</h4>
    <p>{% translate "Body text. The quick brown fox jumps over the lazy dog." %}</p>
    <p class="text-muted">{% translate "Muted text, used for helper/description lines." %}</p>
    <p><a href="#">{% translate "A link" %}</a></p>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">{% translate "Buttons" %}</div>
  <div class="card-body d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-primary">{% translate "Primary" %}</button>
    <button type="button" class="btn btn-secondary">{% translate "Secondary" %}</button>
    <button type="button" class="btn btn-success">{% translate "Success" %}</button>
    <button type="button" class="btn btn-danger">{% translate "Danger" %}</button>
    <button type="button" class="btn btn-warning">{% translate "Warning" %}</button>
    <button type="button" class="btn btn-outline-primary">{% translate "Outline" %}</button>
    <button type="button" class="btn btn-primary btn-sm">{% translate "Small" %}</button>
    <button type="button" class="btn btn-primary" disabled>{% translate "Disabled" %}</button>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">{% translate "Badges" %}</div>
  <div class="card-body d-flex flex-wrap gap-2">
    <span class="badge text-bg-primary">{% translate "Primary" %}</span>
    <span class="badge text-bg-secondary">{% translate "Secondary" %}</span>
    <span class="badge text-bg-success">{% translate "Success" %}</span>
    <span class="badge text-bg-danger">{% translate "Danger" %}</span>
    <span class="badge text-bg-warning">{% translate "Warning" %}</span>
    <span class="badge text-bg-info">{% translate "Info" %}</span>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">{% translate "Alerts" %}</div>
  <div class="card-body">
    <div class="alert alert-primary mb-2">{% translate "Primary alert" %}</div>
    <div class="alert alert-success mb-2">{% translate "Success alert" %}</div>
    <div class="alert alert-warning mb-2">{% translate "Warning alert" %}</div>
    <div class="alert alert-danger mb-0">{% translate "Danger alert" %}</div>
  </div>
</div>

<div class="row row-cols-1 row-cols-md-3 g-3 mb-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">{% translate "Card title" %}</h5>
        <p class="card-text text-muted">{% translate "Card body text sample, a couple of lines to check wrapping." %}</p>
        <a href="#" class="btn btn-outline-primary btn-sm">{% translate "Action" %}</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">{% translate "Card title" %}</h5>
        <p class="card-text text-muted">{% translate "Card body text sample, a couple of lines to check wrapping." %}</p>
        <a href="#" class="btn btn-outline-primary btn-sm">{% translate "Action" %}</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">{% translate "Card title" %}</h5>
        <p class="card-text text-muted">{% translate "Card body text sample, a couple of lines to check wrapping." %}</p>
        <a href="#" class="btn btn-outline-primary btn-sm">{% translate "Action" %}</a>
      </div>
    </div>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">{% translate "Form" %}</div>
  <div class="card-body">
    <form>
      <div class="mb-3">
        <label class="form-label">{% translate "Text field" %}</label>
        <input type="text" class="form-control" placeholder="{% translate 'Placeholder' %}">
      </div>
      <div class="mb-3">
        <label class="form-label">{% translate "Select" %}</label>
        <select class="form-select">
          <option>{% translate "Option 1" %}</option>
          <option>{% translate "Option 2" %}</option>
        </select>
      </div>
      <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="cvKitchenSinkCheck">
        <label class="form-check-label" for="cvKitchenSinkCheck">{% translate "Checkbox" %}</label>
      </div>
      <button type="button" class="btn btn-primary">{% translate "Submit" %}</button>
    </form>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header">{% translate "Table" %}</div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>{% translate "Name" %}</th>
          <th>{% translate "Status" %}</th>
          <th>{% translate "Updated" %}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{% translate "Sample row" %}</td>
          <td><span class="badge text-bg-success">{% translate "Active" %}</span></td>
          <td class="text-muted">2026-07-29</td>
        </tr>
        <tr>
          <td>{% translate "Another row" %}</td>
          <td><span class="badge text-bg-secondary">{% translate "Disabled" %}</span></td>
          <td class="text-muted">2026-07-01</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}