<jds-page-layout>
    <jds-page-intro>
        <jds-page-back-link :to="{name: 'docs.patterns.page'}">Back</jds-page-back-link>
        <jds-page-title>Hello world!</jds-page-title>
        <p>This is a page description.</p>
        <template #button>
            <jds-button icon="add">Create</jds-button>
            <jds-button icon="edit" type="secondary">Edit</jds-button>
        </template>
    </jds-page-intro>
    <jds-page-section>
        <jds-page-section-heading>This is a section.</jds-page-section-heading>
        <p>
            You always want to use sections for marking parts of a page layout, even when you only plan
            to have one such section on the page. Since the page layout is grid-based, sections are in
            charge of figuring out how much room they should take.
        </p>
        <p>It has exactly one column, and fully spans the width of the page layout, about 900px. Most
            pages can use this width; forms and other content fit snugly in this width without being
            excessively long.
        </p>
        <p>It <em>is</em> rather long for human-readable text. If you're going to write a bedtime story
        in your HTML, maybe look at using a column layout (with just one column) instead.</p>
    </jds-page-section>
    <jds-page-section full-width>
        <jds-page-section-heading>But what about very wide sections?</jds-page-section-heading>
        <p>This is a full-width layout.</p>

        <jds-table>
            <jds-table-row>
                <jds-table-heading>Name</jds-table-heading>
                <jds-table-heading>Request</jds-table-heading>
                <jds-table-heading>Status</jds-table-heading>
                <jds-table-heading>Last updated</jds-table-heading>
                <jds-table-heading>Deadline</jds-table-heading>
            </jds-table-row>
            <jds-table-row>
                <jds-table-cell primary>Mechanic</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-20T06:41:03+0000" /><br><small>by Suvi</small></jds-table-cell>
                <jds-table-cell>Request pending</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
            </jds-table-row>
            <jds-table-row>
                <jds-table-cell primary>Mechanic</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /><br><small>by Pia</small></jds-table-cell>
                <jds-table-cell>Pipeline: In Production</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
            </jds-table-row>
        </jds-table>

        <p>This layout will extend the full available space on the page. It makes a lot of sense for
            large entities such as diagrams or tables to take the full width if it can take advantage of
            the extra space.
        </p>
        <p>Resize this preview to try!</p>
    </jds-page-section>
    <jds-page-section layout="columns">
        <jds-page-section-heading>This section has two columns...
            <template #toolbar>
                <jds-dropdown-menu label="Bulk actions">
                    <jds-dropdown-menu-item icon="mail">Bulk email...
                        <template #hint>
                            Send email to each selected candidate.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Send additional forms...
                        <template #hint>
                            Send out a form to each selected candidate by email.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Bulk email...
                        <template #hint>
                            Send email to each selected candidate.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Send additional forms...
                        <template #hint>
                            Send out a form to each selected candidate by email.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Bulk email...
                        <template #hint>
                            Send email to each selected candidate.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Send additional forms...
                        <template #hint>
                            Send out a form to each selected candidate by email.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Bulk email...
                        <template #hint>
                            Send email to each selected candidate.
                        </template>
                    </jds-dropdown-menu-item>
                    <jds-dropdown-menu-item icon="mail">Send additional forms...
                        <template #hint>
                            Send out a form to each selected candidate by email.
                        </template>
                    </jds-dropdown-menu-item>
                </jds-dropdown-menu></template>
        </jds-page-section-heading>
        <p>This left-hand area takes about 2/3rds of the available space. For regular content, if you
            need to have something secondary to a contrast with the main information, such as a graph
            and some actions or labels associated with it, this is a good pick.
        </p>
        <jds-page-section-heading>
            Use of headings
            <template #toolbar><jds-button>Add item</jds-button></template>
        </jds-page-section-heading>
        <p>
            If you have multiple chunks of content that are related to each other, but
            make up different logical pieces, you should use multiple section headings
            to break up the monotony.
        </p>
        <p>
            Remember to use sentence case for headings.
        </p>
        <jds-page-section-heading>Be careful with content</jds-page-section-heading>
        <p>
            Narrow sections look nice, but don't leave much room for actual interactive content.
            Many JDS components will be forced to wrap themselves up when in a squeeze, which can
            badly affect usability and discoverability of functionality.
        </p>
        <jds-table>
            <jds-table-row>
                <jds-table-heading>Name</jds-table-heading>
                <jds-table-heading>Request</jds-table-heading>
                <jds-table-heading>Status</jds-table-heading>
                <jds-table-heading>Last updated</jds-table-heading>
                <jds-table-heading>Deadline</jds-table-heading>
            </jds-table-row>
            <jds-table-row>
                <jds-table-cell primary>Mechanic</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-20T06:41:03+0000" /><br><small>by Suvi</small></jds-table-cell>
                <jds-table-cell>Request pending</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
            </jds-table-row>
            <jds-table-row>
                <jds-table-cell primary>Mechanic</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /><br><small>by Pia</small></jds-table-cell>
                <jds-table-cell>Pipeline: In Production</jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
                <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
            </jds-table-row>
        </jds-table>

        <p>
            Make sure your content works appropriately in tight spaces &mdash; especially when locales with
            extra-long words are involved!
        </p>

        <template #right>
            <jds-page-section-heading>... Including a sidebar.</jds-page-section-heading>
            <jds-breakdown>
                <jds-breakdown-item icon="dashboard" label="Layout">Columns, uneven (default)</jds-breakdown-item>
                <jds-breakdown-item label="Left width">2/3rds</jds-breakdown-item>
                <jds-breakdown-item label="Right width">1/3rd</jds-breakdown-item>
            </jds-breakdown>
            <jds-page-section-heading>Sidebar sections</jds-page-section-heading>
            <p>
                A well-mannered sidebar can use multiple section headings to separate their
                contents into easy-to-digest parts.
            </p>
            <p>
                <jds-button :to="{name: 'docs.components.button'}">Make changes</jds-button>
            </p>
        </template>
    </jds-page-section>
</jds-page-layout>