{% extends "page.html" %}

{% block toolbar %}
    {% snippet 'development/snippets/breadcrumb.html', stage=1 %}
    {% snippet 'development/snippets/breadcrumb.html', stage=2 %}
    {% snippet 'development/snippets/breadcrumb.html', stage=3 %}
{% endblock %}

{% block content_action %}
    {% snippet 'development/snippets/actions.html' %}
{% endblock %}

{% block secondary_content %}
    {% snippet 'development/snippets/context.html' %}

    {{ ui.sidebar_section(lipsum(1), icon="info-circle", title="Helper text") }}


    {% snippet 'development/snippets/nav.html', heading='Navigation' %}
    {% snippet 'development/snippets/nav.html', heading='Active Navigation', show_active=true %}
    {% snippet 'development/snippets/nav.html', heading='Icon Navigation', show_icons=true %}
    {% snippet 'development/snippets/facet.html', heading='Facet List', show_icons=true %}
{% endblock %}

{% block primary_content %}
    {% snippet 'development/snippets/page_header.html' %}

    <div class="module-content search-form">
        <div class="input-group search-input-group">
            <input type="text" class="input-lg form-control" name="q" value="" autocomplete="off" placeholder="Search something...">
            <span class="input-group-btn">
                <button class="btn btn-secondary" type="submit">
                    <i class="fa fa-search"></i>
                    <span class="sr-only">Search</span>
                </button>
            </span>
        </div>
    </div>

    <div class="module-content">
        <h1 class="page-heading">Top level heading (h1)</h1>
        <h2>Some Rendered Markdown (h2)</h2>
        <div class="embedded-content">
            <h1>Heading 1</h1>
            {{ lipsum(1) }}
            <h2>Heading 2</h2>
            {{ lipsum(1) }}
            <h3>Heading 3</h3>
            {{ lipsum(1) }}
        </div>
    </div>

    <div class="module-content">
        <hr>
        <h2>Forms</h2>
    </div>
    {% snippet 'development/snippets/form.html' %}
    {% snippet 'development/snippets/form.html', error=['This field has an error'] %}

    <div class="module-content">
        <hr>
        <h2>Form stages</h2>
    </div>
    <div class="form_stages">
        {% snippet 'development/snippets/form_stages.html' %}
    </div>


    <div class="module-content m-bottom">
        <h2>Datasets</h2>
        <hr>
        {% snippet 'snippets/package_list.html', packages=[
  {'name': "test", 'title': 'Dataset #1', 'type': 'dataset', 'notes': lipsum(1), 'tracking_summary':{'recent': 10}},
  {'name': "test", 'title': 'Dataset #2', 'type': 'dataset', 'notes': lipsum(0), 'tracking_summary':{'recent': 5}},
  {'name': "test", 'title': 'Dataset #3', 'type': 'dataset', 'notes': lipsum(1), 'tracking_summary':{'recent': 10}},
  {'name': "test", 'title': 'Dataset #4', 'type': 'dataset', 'notes': lipsum(1), 'tracking_summary':{'recent': 10}}
        ] %}
    </div>

    <div class="module-content p-top">
        <hr class="m-top">
        <h2>Media Grid</h2>
    </div>
    {% snippet 'development/snippets/media_grid.html', groups=[
{'name': "test", 'display_name': 'Group #1', 'type': 'group', 'description': lipsum(0), 'packages': 0},
{'name': "test", 'display_name': 'Group #2', 'type': 'group', 'description': lipsum(1), 'packages': 1},
{'name': "test", 'display_name': 'Group #3', 'type': 'group', 'description': lipsum(1), 'packages': 10},
{'name': "test", 'display_name': 'Group #4', 'type': 'group', 'description': lipsum(1), 'packages': 200},
{'name': "test", 'display_name': 'Group #5', 'type': 'group', 'description': lipsum(1), 'packages': 10},
{'name': "test", 'display_name': 'Group #6', 'type': 'group', 'description': lipsum(0), 'packages': 5}
    ] %}

    <div class="module-content">
        <h2>Pagination</h2>
    </div>
    {% snippet 'development/snippets/pagination.html', total=5, current=1 %}
    {% snippet 'development/snippets/pagination.html', total=5, current=3 %}
    {% snippet 'development/snippets/pagination.html', total=5, current=5 %}

{% endblock %}