---
layout: default
icons: true
header_class: short
body_class: package-nav-open
---
{% assign section_name = page.package | downcase %}
{% assign package = site.collections | where: "title", page.package | first %}
{% assign sorted_sections = site.sections | sort: "order_number" %}

{% assign prev_section = null %}
{% assign current_section = null %}
{% assign next_section = null %}
{% for section in sorted_sections %}
	{% unless next_section %}
		{% if page.url contains section.url %}
			{% assign current_section = section %}
		{% elsif current_section %}
			{% assign next_section = section %}
		{% else %}
			{% assign prev_section = section %}
		{% endif %}
	{% endunless %}
{% endfor %}

{% assign prev = null %}
{% assign current = null %}
{% assign next = null %}
{% if package.docs %}
	{% assign items = package.docs | sort: "order_number" %}
	{% for item in items %}
		{% unless next %}
			{% if item.url == page.url %}
				{% assign current = item %}
			{% elsif current %}
				{% assign next = item %}
			{% else %}
				{% assign prev = item %}
			{% endif %}
		{% endunless %}
	{% endfor %}
{% endif %}

<header class="short">
	{% include navigation/top.html %}
</header>

<div class="docs-container">
	{% include navigation/collection-nav.html docs_nav=true %}
	<div class="wrapper wrapper-large">

		<nav class="docs-nav full-navigation" id="docs-nav">
			<ul class="docs-nav-list">
				{% assign collection = site.collections | where: "title", page.package | first %}
				{% if collection.docs %}
					<li class="nav-item top-level current">
						{% assign sorted = collection.docs | sort: "order_number" %}
						<a href="">{{ page.package | default: "General" }} ({{ sorted | size }})</a>
						<ul>
						{% for item in sorted %}
							<li class="nav-item {% if item.url == page.url %}current{% endif %}">
								<a href="{{ item.url }}">{{ item.title }}</a>
								{% if item.url == page.url %}
									<div class="toc">{% include toc.html html=content h_max=3 %}</div>
								{% endif %}
							</li>
						{% endfor %}
						</ul>
					</li>
				{% endif %}
			</ul>
		</nav>

		{% include navigation/mobile-doc-selector.html %}

		<section class="docs-main" id="doc">
			<article class="content">
				<h1 class="doc-category-header">{{ page.package }}</h1>
				{% if page.heading %}
					<h2 class="doc-main-header">{{ page.heading }}</h2>
				{% elsif page.title %}
					<h2 class="doc-main-header">{{ page.title }}</h2>
				{% elsif page.name %}
					<h2 class="doc-main-header">{{ page.name }}</h2>
				{% endif %}

				{% if page.subtitle %}
					<p class="subtitle">{{ page.subtitle }}</p>
				{% elsif page.description %}
					<p class="subtitle">{{ page.description }}</p>
				{% endif %}

				<a href="cloudcannon:collections/{{ page.path }}" class="editor-link button"><strong>&#9998;</strong> Edit package</a>
				{% if current_section.wip %}
					<p class="wip-warning">This package is a work-in-progress. Some aspects may be awaiting improvement.</p>
				{% endif %}

				{{ content }}
			</article>
		</section>
	</div>
</div>


{% if current_section %}
	<div class="split-choice-wrapper">
		{% if prev %}
			<div class="split-choice">
				<div class="split-choice-content">
					<i class="material-icons">arrow_back</i>
					{% if page.package %}<h1 class="doc-category-header">{{ page.package }}</h1>{% endif %}
					<h2>{{ prev.title }}</h2>
					<a class="button light" href="{{ prev.url }}">Read previous doc</a>
				</div>
			</div>
		{% elsif prev_section %}
			{% assign prev_package = site.collections | where: "title", prev_section.name | first %}
			{% if prev_package.docs %}
				<div class="split-choice">
					<div class="split-choice-content">
						<i class="material-icons">{{prev_section.icon}}</i>
						{% assign last_in_package = prev_package.docs | sort: "order_number" | last %}
						<h1 class="doc-category-header">{{ last_in_package.package }}</h1>
						<h2>{{ last_in_package.title }}</h2>
						<a class="button light" href="{{ last_in_package.url }}">Go back to {{ prev_section.name }}</a>
					</div>
				</div>
			{% endif %}
		{% endif %}

		{% if next %}
			<div class="split-choice">
				<div class="split-choice-content">
					<i class="material-icons">arrow_forward</i>
					{% if page.package %}<h1 class="doc-category-header">{{ page.package }}</h1>{% endif %}
					<h2>{{ next.title }}</h2>
					<a class="button" href="{{ next.url }}">Read next doc</a>
				</div>
			</div>
		{% elsif next_section %}
			{% assign next_package = site.collections | where: "title", next_section.name | first %}
			{% if next_package.docs %}
				<div class="split-choice">
					<div class="split-choice-content">
						<i class="material-icons">{{ next_section.icon }}</i>
						{% assign next_in_package = next_package.docs | sort: "order_number" | first %}
						<h1 class="doc-category-header">{{ next_in_package.package }}</h1>
						<h2>{{ next_in_package.title }}</h2>
						<a class="button" href="{{ next_in_package.url }}">Move onto {{ next_section.name }}</a>
					</div>
				</div>
			{% endif %}
		{% else %}
			<div class="split-choice">
				<div class="split-choice-content">
					<i class="material-icons">chat</i>
					<h3>Let's Chat</h3>
					<p>If you couldn't find what you needed, send us a message.</p>
					<a class="button light" href="{{ site.main_url }}/contact/">Contact Support</a>
				</div>
			</div>
		{% endif %}
	</div>
{% else %}
	<div class="split-choice-wrapper">
		<div class="split-choice">
			<div class="split-choice-content">
				<i class="material-icons">chat</i>
				<h3>Let's Chat</h3>
				<p>If you couldn't find what you needed, send us a message.</p>
				<a class="button light" href="{{ site.main_url }}/contact/">Contact Support</a>
			</div>
		</div>
	</div>
{% endif %}

<script src="/js/sticky-sidebar.js"></script>
<script src="/assets/js/mobile-doc-selector.js"></script>