{% 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="icon-info-sign"></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">
    <span class="control-group search-giant">
      <input type="text" class="search" name="q" value="" autocomplete="off" placeholder="Search something...">
      <button type="submit"><i class="icon-search"></i> <span>Search</span></button>
    </span>
  </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 %}
