<div class="page">
    <header class="topbar" role="banner">
        <nav class="dashnav">
            <ul>
                <li class="sidebar-trigger"><a href="?sidebar=show"><svg width="30" height="30" class="icon icon-o-birdhouse"><use xlink:href="/assets/svg/core.svg#o-birdhouse" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-dashboard"><use xlink:href="/assets/svg/core.svg#o-dashboard" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-world"><use xlink:href="/assets/svg/core.svg#o-world" /></svg></a></li>
            </ul>
        </nav>

        <nav class="utilnav">
            <ul>
                <li><a href="/"><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> <span>Search</span></a></li>
                <li><a href="/" class="selected"><svg width="16" height="16" class="icon icon-gear"><use xlink:href="/assets/svg/core.svg#gear" /></svg> <span>Settings</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> <span>My Account</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-question"><use xlink:href="/assets/svg/core.svg#question" /></svg> <span>Help</span></a></li>
                <li><a href="/" class="button logout ">Log out</a></li>
            </ul>
        </nav>
    </header>
    <div class="panels">
        <aside class="sidebar">

            <div class="sidebar-nav">
                <div class="appmenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
                <div class="submenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
            </div>

        </aside>

        <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
        <script src="/assets/js/sidebar.js"></script>
        <main class="main-panel">

            <header class="title-panel">
                <h1>Listing all your things</h1>
                <div class="buttons">
                    <a href="/foo" class="button button-icon  icon-left">
                        <div>
                            <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
                            <span>Submit</span>
                        </div>
                    </a>

                </div>
            </header>

            <div class="smartbar">
                <ul>
                    <li>
                        <div class="button-group button-toggle">
                            <a class="button button-small toggle-active" href="/foo"><svg width="12" height="12" class="icon icon-grid-big"><use xlink:href="/assets/svg/core.svg#grid-big" /></svg> Grid</a>
                            <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> List</a>
                        </div>

                    </li>
                    <li>
                        <div class="breadcrumb tab-active">
                            <a href="/grandparent">Grandparent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent">Parent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent/me">Current Item</a>
                        </div>

                    </li>
                    <li>
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-end smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <button type="submit" name="btnUndo" id="btnUndo" value="Undo" class="button">
<svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Undo</span>
</button>
                    </li>
                </ul>
            </div>
            <form class="form-simple">
                <h2 class="divider">
                    <div>
                        <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is an item divider added by Perch
                    </div>
                </h2>

                <div class="field-wrap annotated"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
                    <p class="inline-help">This is the help text for this field.</p>
                </div>

                <div class="field-wrap input-error"><label for="myfield">Things here <span class="required-value">(required)</span></label>
                    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"><span class="error">An optional message might say that this field is required.</span></div>
                </div>

                <div class="field-wrap annotated"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
                    <p class="inline-help">This is the help text for this field.</p>
                </div>

                <div class="field-wrap">
                    <label for="myfield">Things here</label>

                    <div class="form-entry">
                        <input type="text" data-display-as="tags" required="required" aria-required="true" placeholder="Enter some tags" class="input-simple m" value="foo,bar,baz">

                        <input type="hidden" required="required" aria-required="true" placeholder="Enter some tags" class="input-simple m" value="foo,bar,baz">

                        <script src="/assets/js/jquery.min.js"></script>
                        <script src="/assets/js/jquery-ui.min.js"></script>
                        <script src="/assets/js/selectize.min.js"></script>
                        <script>
                            $('[data-display-as=tags]').selectize({
                                plugins: ['drag_drop'],
                                delimiter: ',',
                                persist: false,
                                create: function(input) {
                                    return {
                                        value: input,
                                        text: input
                                    }
                                },
                                sortField: '#sort'
                            });
                        </script>
                        <p class="inline-help">This is the help text for this field.</p>

                    </div>
                </div>

                <div class="field-wrap"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="file" id="" class="input-simple" title="Upload a file">
                        <p class="inline-help">This is the help text for this field.</p>
                    </div>
                </div>

                <div class="divider">
                    <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is content in a divider added with divider-before
                </div>

                <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="checkbox" id="">
                    </div>
                </div>

                <div class="asset-badge field-wrap" data-for="perch_image_assetID">
                    <div class="asset-badge-inner">
                        <div class="asset-badge-thumb ">
                            <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" width="100" height="150" alt="Preview">
                            <div class="asset-badge-remove">
                                <span class="asset-ban hidden"><svg width="64" height="64" class="icon icon-ban-alt"><use xlink:href="/assets/svg/assets.svg#ban-alt" /></svg></span>
                                <span class="asset-badge-remove-fields js">
					<label for="perch_image_remove" class="inline">Remove</label>
					<input type="checkbox" class="check" id="perch_image_remove" name="perch_image_remove" value="1">
				</span>
                                <a href="#" class="asset-badge-remove-action">
					<svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
				</a>
                            </div>
                        </div>
                        <div class="asset-badge-meta">
                            <h3 class="title">Default image</h3>
                            <ul class="meta">
                                <li><svg width="12" height="12" class="icon icon-o-photo"><use xlink:href="/assets/svg/assets.svg#o-photo" /></svg> Image / JPEG</li>
                                <li><svg width="12" height="12" class="icon icon-o-crop"><use xlink:href="/assets/svg/assets.svg#o-crop" /></svg> 600 &times; 898 px @ 67KB</li>
                            </ul>
                            <div class="asset-add">
                                <a href="#">Select or upload an image</a>
                            </div>

                        </div>
                    </div>
                </div>

                <fieldset class="fieldset-clean">
                    <div class="fieldset-inner">

                        <div class="legend-wrap">
                            <legend>May be created by</legend>
                        </div>

                        <div class="checkbox-group">

                            <div class="checkbox-single">
                                <label for="subpage_roles_0" class="">Everyone</label>
                                <div class="form-entry">
                                    <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                                </div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_1" class="">Admin</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_2" class="">Editor</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <div class="submit-bar ">

                    <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
                        <div class="form-entry"><input type="checkbox" id="">
                        </div>
                    </div>

                    <div class="submit-bar-actions">
                        <input type="submit" class="button button-simple" value="Submit"> or <a href="/perch/core/users">Cancel</a>
                    </div>
                </div>

            </form>

        </main>

    </div>

</div>
<div class="page">
{{> @topbar }}
	<div class="panels">
		{{> @sidebar }}

		<main class="main-panel">

			{{> @page-head }}

			{{> @tabbed-smartbar }}

			{{> @simple-form }}

		</main>

	</div>

</div>
/* No context defined for this component. */

There are no notes for this item.