<section class="section docs-section" id="data-patterns">
	<h2 class="section-title">Data Patterns</h2>
	<p class="docs-section-description">
		Toolbar, search field, pagination, empty state и skeleton закрывают типовые состояния
		таблиц, списков и страниц с данными.
	</p>

	<div class="block">
		<div class="toolbar">
			<div class="toolbar-group">
				<div>
					<h3 class="toolbar-title">Projects</h3>
					<span class="toolbar-meta">24 items</span>
				</div>
			</div>

			<div class="toolbar-group">
				<div class="input-group input-group-compact search-field">
					<span class="input-group-addon">
						<i class="ph ph-magnifying-glass"></i>
					</span>
					<input class="input-group-input" type="search" value="release" placeholder="Search">
					<button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
						<i class="ph ph-x"></i>
					</button>
				</div>

				<button class="btn btn-primary btn-small with-icon" type="button">
					<i class="ph ph-funnel"></i>
					Filter
				</button>
				<button class="btn btn-accent btn-small with-icon" type="button">
					<i class="ph ph-plus"></i>
					Create
				</button>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="input-group">
			<span class="input-group-addon">https://</span>
			<input class="input-group-input" type="text" value="example.gnexus.local" placeholder="Domain">
			<button class="input-group-action" type="button">Save</button>
		</div>
	</div>

	<div class="block">
		<nav class="pagination" aria-label="Pagination">
			<button class="pagination-item" type="button" disabled>
				<i class="ph ph-arrow-left"></i>
			</button>
			<button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
			<button class="pagination-item" type="button">2</button>
			<button class="pagination-item" type="button">3</button>
			<span class="pagination-ellipsis">...</span>
			<button class="pagination-item" type="button">12</button>
			<button class="pagination-item" type="button">
				<i class="ph ph-arrow-right"></i>
			</button>
		</nav>
	</div>

	<div class="block">
		<div class="empty-state">
			<div class="empty-state-icon">
				<i class="ph ph-package"></i>
			</div>
			<h3 class="empty-state-title">No results</h3>
			<p class="empty-state-text">
				Nothing matched the current filters. Reset the query or create a new item.
			</p>
			<div class="empty-state-actions">
				<button class="btn btn-secondary btn-small" type="button">Reset</button>
				<button class="btn btn-accent btn-small" type="button">Create</button>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="skeleton-stack" aria-label="Loading preview">
			<span class="skeleton skeleton-title"></span>
			<span class="skeleton skeleton-line"></span>
			<span class="skeleton skeleton-line" style="width: 84%"></span>
			<span class="skeleton skeleton-line" style="width: 68%"></span>
			<span class="skeleton skeleton-block"></span>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Toolbar HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="toolbar"&gt;
  &lt;div class="toolbar-group"&gt;
    &lt;div&gt;
      &lt;h3 class="toolbar-title"&gt;Projects&lt;/h3&gt;
      &lt;span class="toolbar-meta"&gt;24 items&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="toolbar-group"&gt;
    &lt;div class="input-group input-group-compact search-field"&gt;
      &lt;span class="input-group-addon"&gt;&lt;i class="ph ph-magnifying-glass"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input class="input-group-input" type="search" placeholder="Search"&gt;
      &lt;button class="input-group-action" type="button" data-input-clear aria-label="Clear search"&gt;
        &lt;i class="ph ph-x"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Input Group HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="input-group"&gt;
  &lt;span class="input-group-addon"&gt;https://&lt;/span&gt;
  &lt;input class="input-group-input" type="text" placeholder="Domain"&gt;
  &lt;button class="input-group-action" type="button"&gt;Save&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Pagination HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;nav class="pagination" aria-label="Pagination"&gt;
  &lt;button class="pagination-item" type="button" disabled&gt;Prev&lt;/button&gt;
  &lt;button class="pagination-item pagination-item-active" type="button" aria-current="page"&gt;1&lt;/button&gt;
  &lt;button class="pagination-item" type="button"&gt;2&lt;/button&gt;
  &lt;span class="pagination-ellipsis"&gt;...&lt;/span&gt;
  &lt;button class="pagination-item" type="button"&gt;12&lt;/button&gt;
  &lt;button class="pagination-item" type="button"&gt;Next&lt;/button&gt;
&lt;/nav&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Empty State HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="empty-state"&gt;
  &lt;div class="empty-state-icon"&gt;&lt;i class="ph ph-package"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;h3 class="empty-state-title"&gt;No results&lt;/h3&gt;
  &lt;p class="empty-state-text"&gt;Nothing matched the current filters.&lt;/p&gt;
  &lt;div class="empty-state-actions"&gt;
    &lt;button class="btn btn-secondary btn-small"&gt;Reset&lt;/button&gt;
    &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Skeleton HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="skeleton-stack" aria-label="Loading preview"&gt;
  &lt;span class="skeleton skeleton-title"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-line"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-line" style="width: 84%"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-block"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Input Patterns JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-js">InputPatterns.init();

// Available on the global namespace too:
GNexusUIKit.InputPatterns.init();</code></pre>
	</div>
</section>