{% 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 actions_content %}
{% snippet 'development/snippets/actions.html' %}
{% endblock %}

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

<div class="module module-narrow module-shallow">
  <h2 class="module-heading"><i class="fa fa-info-circle"></i> Helper text</h2>
  <div class="module-content">{{ lipsum(1) }}</div>
</div>

{% 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">
  <div class="input-group input-group-lg search-giant">
    <input type="text" class="search form-control" name="q" value="" autocomplete="off" placeholder="Search something...">
    <span class="input-group-btn">
        <button class="btn btn-default" 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>
{% snippet 'development/snippets/form_stages.html' %}


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