-
    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

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)