-
    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'

include layouts/container.pug

include objects/heading.pug
include objects/rule.pug
include objects/button.pug
include objects/text-field.pug
include objects/field-label.pug
include objects/radio.pug
include objects/checkbox.pug
include objects/switch.pug
include objects/form.pug
include objects/action-button.pug

mixin box 
    +container(padX=true padY=true inPage=true theme="raised")
        block


doctype html
html
    head
        meta(charset='utf-8')
        meta(name='viewport' content='width=device-width, initial-scale=1')
        title iro-design
        link(rel="stylesheet" href="style.css")
        script(src="script.js")

    body
        +container(padX=true padY=true narrow=true)

            +h1-heading(level='xl')= 'Heading'
            +rule(level='medium')

            +box
                +div-heading(level='xxl')= 'XXL Heading'
                +div-heading(level='xl')= 'XL Heading'
                +div-heading(level='lg')= 'LG Heading'
                +div-heading(level='md')= 'MD Heading'
                +div-heading(level='sm')= 'SM Heading'
                +div-heading(level='xs')= 'XS Heading'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Rule'
            +rule(level='medium')

            +box
                +div-heading(level='lg')= 'Heading'
                +rule(level='strong')
                p= loremIpsum

            +box
                +div-heading(level='sm')= 'Heading'
                +rule(level='medium')
                p= loremIpsum

            +box
                +div-heading(level='xs')= 'Heading'
                +rule(level='faint')
                p= loremIpsum

            +box
                +rule(level='strong')= 'Strong'
                +rule(level='medium')= 'Medium'
                +rule(level='faint')= 'Faint'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Button'
            +rule(level='medium')

            +box
                +a-button(variant='accent')= 'Button'
                = ' '
                +a-button(variant='accent' disabled=true)= 'Button'
                = ' '
                +a-button(variant='accent' outline=true)= 'Button'
                = ' '
                +a-button(variant='accent' outline=true disabled=true)= 'Button'
                br
                br
                +a-button(variant='primary')= 'Button'
                = ' '
                +a-button(variant='primary' disabled=true)= 'Button'
                = ' '
                +a-button(variant='primary' outline=true)= 'Button'
                = ' '
                +a-button(variant='primary' outline=true disabled=true)= 'Button'
                br
                br
                +a-button(variant='secondary')= 'Button'
                = ' '
                +a-button(variant='secondary' disabled=true)= 'Button'
                = ' '
                +a-button(variant='secondary' outline=true)= 'Button'
                = ' '
                +a-button(variant='secondary' outline=true disabled=true)= 'Button'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Text field'
            +rule(level='medium')

            +box
                +text-field(placeholder='Placeholder')
                br
                br
                +text-field(value='Just landed in L.A.')
                br
                br
                +text-field(value='Readonly' readonly=true)
                br
                br
                +text-field(value='Incorrect input' pattern='a+' required=true)
                br
                br
                +text-field(placeholder='Placeholder' disabled=true)
                br
                br
                +text-field(value='Just landed in L.A.' disabled=true)
                br
                br
                +text-field(value='Readonly' readonly=true disabled=true)
                br
                br
                +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)

            //-----------------------------------------

            +h1-heading(level='xl')= 'Field label'
            +rule(level='medium')

            +box
                +field-label('First name')
                    +text-field(placeholder='Placeholder')
                br
                br
                +field-label('Password', 'At least 6 characters required')
                    +text-field(placeholder='Placeholder' type='password')
                br
                br
                +field-label('Password', 'At least 6 characters required')(invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                br
                +field-label('First name')(disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)

            +box
                +field-label('First name')(align='left' labelWidth='100px')
                    +text-field(placeholder='Placeholder')
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
                    +text-field(placeholder='Placeholder' type='password')
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                br
                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)

            +box
                +field-label('First name')(align='right' labelWidth='100px')
                    +text-field(placeholder='Placeholder')
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
                    +text-field(placeholder='Placeholder' type='password')
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                br
                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                br
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)

            //-----------------------------------------

            +h1-heading(level='xl')= 'Radio'
            +rule(level='medium')

            +box
                +radio(name="radio-demo-1")= 'Cats'
                +radio(name="radio-demo-1")= 'Dogs'
                +radio(name="radio-demo-1" checked=true)= 'Foxes'
                br
                +radio(name="radio-demo-2" disabled=true)= 'Cats'
                +radio(name="radio-demo-2" disabled=true)= 'Dogs'
                +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
                br
                +radio(accent=true name="radio-demo-3")= 'Cats'
                +radio(accent=true name="radio-demo-3")= 'Dogs'
                +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
                br
                +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
                +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
                +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Checkbox'
            +rule(level='medium')

            +box
                +checkbox(indeterminate=true)= 'Cats'
                +checkbox= 'Dogs'
                +checkbox(checked=true)= 'Foxes'
                br
                +checkbox(indeterminate=true disabled=true)= 'Cats'
                +checkbox(disabled=true)= 'Dogs'
                +checkbox(checked=true disabled=true)= 'Foxes'
                br
                +checkbox(accent=true indeterminate=true)= 'Cats'
                +checkbox(accent=true)= 'Dogs'
                +checkbox(accent=true checked=true)= 'Foxes'
                br
                +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
                +checkbox(accent=true disabled=true)= 'Dogs'
                +checkbox(accent=true checked=true disabled=true)= 'Foxes'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Switch'
            +rule(level='medium')

            +box
                +switch= 'Cats'
                +switch= 'Dogs'
                +switch(checked=true)= 'Foxes'
                br
                +switch(disabled=true)= 'Cats'
                +switch(disabled=true)= 'Dogs'
                +switch(checked=true disabled=true)= 'Foxes'
                br
                +switch(accent=true)= 'Cats'
                +switch(accent=true)= 'Dogs'
                +switch(accent=true checked=true)= 'Foxes'
                br
                +switch(accent=true disabled=true)= 'Cats'
                +switch(accent=true disabled=true)= 'Dogs'
                +switch(accent=true checked=true disabled=true)= 'Foxes'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Form'
            +rule(level='medium')

            +box
                +form(labelsAlign="left")
                    +form-item('Username')
                        +text-field(placeholder='Example: Volpeon')

                    +form-item('Password', 'At least 6 characters, all characters allowed')
                        +text-field(placeholder='Example: hunter2', type='password')

                    +form-item('Bio')
                        +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')

                    +form-item('Favorite animal')
                        +radio(name="form-demo-1" checked=true)= 'Foxes'
                        +radio(name="form-demo-1")= 'Other'

                    +form-item('Notification settings')
                        +switch= 'In-app notifications'
                        br
                        +switch= 'Desktop notifications'
                        br
                        +switch= 'Email notifications'

                    +form-item('')
                        +checkbox= 'I\'ve read and accept the terms and conditions'

                    +form-item('')
                        +a-button(variant='primary')= 'Register'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Action button'
            +rule(level='medium')

            +box
                +action-button= 'Idle'
                = ' '
                +action-button(selected=true)= 'Selected'
                = ' '
                +action-button(disabled=true)= 'Disabled'
                = ' '
                +action-button(selected=true disabled=true)= 'Selected + disabled'
                br
                br
                +action-button(icon='trash')= 'Idle'
                = ' '
                +action-button(icon='trash' selected=true)= 'Selected'
                = ' '
                +action-button(icon='trash' disabled=true)= 'Disabled'
                = ' '
                +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
                br
                br
                +action-button(icon='trash')
                = ' '
                +action-button(icon='trash' selected=true)
                = ' '
                +action-button(icon='trash' disabled=true)
                = ' '
                +action-button(icon='trash' selected=true disabled=true)

            +box
                +action-button(quiet=true )= 'Idle'
                = ' '
                +action-button(quiet=true selected=true)= 'Selected'
                = ' '
                +action-button(quiet=true disabled=true)= 'Disabled'
                = ' '
                +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
                br
                br
                +action-button(quiet=true icon='trash')= 'Idle'
                = ' '
                +action-button(quiet=true icon='trash' selected=true)= 'Selected'
                = ' '
                +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
                = ' '
                +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
                br
                br
                +action-button(quiet=true icon='trash')
                = ' '
                +action-button(quiet=true icon='trash' selected=true)
                = ' '
                +action-button(quiet=true icon='trash' disabled=true)
                = ' '
                +action-button(quiet=true icon='trash' selected=true disabled=true)