{% extends "fellchensammlung/base_generic.html" %}
{% load i18n %}
{% load static %}
{% block title %}<title>{% translate "Styleguide" %}</title>{% endblock %}

{% block content %}
    <h1>This is a heading</h1>
    <p>And this is a short paragraph below</p>
    <div class="container-cards">
        <h2>Card Containers</h2>
        <div class="card">
            <h3>I am a card</h3>
            <p>Cards are responsive. Use them to display multiple items of the same category</p>
        </div>
        <div class="card">
            <h3>Photos</h3>
            <p>Cards are responsive. Use them to display multiple items of the same category</p>
            <img src="{% static 'fellchensammlung/img/example_rat_single.png' %}" alt="A rat sitting on a wooden house">
        </div>
    </div>
    <div class="container-cards">
        <form class="form-search card half" method="post">
            <label for="inputA">Input Alpha</label>
            <input name="inputA" maxlength="200" id="inputA">
            <label for="inputB">Beta</label>
            <input name="inputB" maxlength="200" id="inputB">
            <label for="id_location_string">Ort</label>
            <input name="location_string" id="id_location_string">
        </form>
        <div class="card half">
            {% include "fellchensammlung/partials/partial-map.html" %}
        </div>
    </div>
    {% include "fellchensammlung/lists/list-adoption-notices.html" %}
{% endblock %}
