@extends('templates._with_sidebar')

@section('html.head.title', "Style Guide" . ' -')



@section('beforeMain')
    @include('sections.banner', ['background' => '', 'space_class'=>'pt4 pb3'])
        {{-- @if(!empty($item->getBreadcrumbs()))
            @include('atoms.breadcrumbs', ['breadcrumbs' => $item->getBreadcrumbs()])
        @endif --}}

        @include('atoms.heading_group', [
            'title' => "Style Guide",
            'copy' => 'This page contains an overview of styles and examples for use when writing content for this website.'
        ])

    @include('sections.banner_CLOSE')
@endsection



@section('main')
    <h2 class="mb2">Colours</h2>
    <div class="montserrat lightness-1">
        <div class="clearfix ">
            <div class="col col-4 bg-primary-1 p2">Primary: #1f1634</div>
            <div class="col col-4 bg-primary-2 p2">Primary: #352148</div>
            <div class="col col-4 bg-primary-4 p2">Primary: #54467E</div>
        </div>
        <div class="clearfix">
            <div class="col col-6 bg-assent-1 p2">Assent 1: #ffb63b</div>
            <div class="col col-6 bg-assent-2 p2">Assent 2: #0090FF</div>
        </div>
        <div class="clearfix">
            <div class="col col-4 bg-lightness-3 p2">#4e4e4e</div>
            <div class="col col-4 bg-lightness-2 p2">#777777</div>
            <div class="col col-4 bg-lightness-1 p2 lightness-3">#E5E5E5</div>
        </div>
    </div>

    <hr />

    <h2>Headings</h2>
    <p>Headings are used to create sections on a page. The diferent sizes help to create a hierarchy and break up content making it easier to scan and digest. Use heading H2 and smaller to sub-divide content.</p>

    <br />
    <br />

    @include('atoms.heading_group', [
        'title' => 'This is a page header',
        'copy' => 'This is some text that helps to give the title context.',
        'title_link' => '#'])

    <br />

    @include('atoms.styles.headings')

    <hr class="my4" />

    <h2>Fonts</h2>
    <p class="mb3">Fonts used on this website are shown below. Please only use these fonts.</p>
    @include('atoms.styles.fonts')

    <hr class="my4" />

    <h2>Paragraphs and content styles</h2>
	<p>This section shows the styles available and offers suggestions on how to use them.</p>
	<p>Feel free to use <strong>bold</strong>&nbsp;and <em>italic</em>, but NEVER use <u>underline</u>. Underlines&nbsp;can be confusing to users since they usually indicate a <a href="#!">link</a>.</p>
	<p>Paragraphs should be kept relatively short so that content is easy to scan. Users will often scan the first sentence&nbsp;of each paragraph and read the paragraph further if the first sentence catches their attention.</p>

    <hr class="my4" />

    <h2>Blockquotes</h2>
    <p class="mb3">Styled quotes can break up content visually and contextually. Use blockquotes to quote people or highlight and bring out various parts of a document. They can also help to add a bit of variation to a very text based document.</p>
    @include('atoms.styles.blockquote')

    <hr class="my4" />

    <h2>Lists</h2>
    <p class="mb3">Lists are a really effective way to display collections of items in a way which is easy to scan, read, digest and break up the page visually.</p>

    <p>Numbered lists can be used where the items have a certain sequence, for example when you are describing certain steps that must be completed in order.</p>
    <h4>Bullets</h4>
    @include('atoms.styles.bullet_list')
    <h4>Numbered</h4>
    @include('atoms.styles.numbered_list')

    <hr class="my4" />

    <h2>Forms</h2>

    <h4 class="mb1">Inputs</h4>
    @include('atoms.styles.forms')

    <h4 class="mb1">Select</h4>
    @include('atoms.styles.select')

    <h4 class="mb1">Toggle switch</h4>
    @include('atoms.styles.toggle_switch')

    <h4 class="mb1">Checkbox</h4>
    @include('atoms.styles.checkbox')

    <h4 class="mb1">Radio buttons</h4>
    @include('atoms.styles.radio')

    <hr class="my4" />

    <h2>Buttons</h2>
    @include('atoms.styles.buttons')

    <hr class="my4" />

    <h2>Tables</h2>
    <p class="mb3">The table will auto size when resizing your browser and each column will adjust itself automatically according the content placed inside it.</p>

    <p>Be aware that tables with too many columns will not look good on mobile devices. As a rule of thumb, a maximum of 4 columns works well.</p>

    <table>
        <thead>
            <tr>
                <th data-field="id">Name</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alvin</td>
                <td>Eclair</td>
                <td>$0.87</td>
            </tr>
            <tr>
                <td>Alan</td>
                <td>Jellybean</td>
                <td>$3.76</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
            </tr>
            <tr>
                <td>Shannon</td>
                <td>KitKat</td>
                <td>$9.99</td>
            </tr>
        </tbody>
    </table>

    <hr class="my4" />

    <h2>Checklist style</h2>
    <p>The checklist page contains a list of items to be completed or points to be considered. As users complete a task they can check off that task helping them to identity which items have completed and which items haven't.</p>

    <p class="mb3">Each checklist must contain a top heading of H4. Any other headings used must be H5 or H6 accordingly. Each checklist must also contain a minimum of at least one small paragraph.</p>
    @include('atoms.checklist')
    @include('atoms.checklist')
    @include('atoms.checklist')

    <hr class="my4" />

    <h2>Guidance note and FAQ page Styles</h2>
    <p>Each item is designed to be collapsible. When the page first loads the user is able to quickly scan through each heading. Once the user has found the section they are looking for they can expand that section by clicking on it.</p>

    <p class="mb3">Each collapsible section must contain a top heading of H4. Any other headings used must be H5 or H6 accordingly. Each section must also contain a minimum of at least one small paragraph.</p>
        @foreach($variable as $key => $value)
         @include('atoms.resource_link_collapsible' , $value)
    @endforeach





@endsection



@section('sidebar')

@endsection



@section('afterMain')

@endsection