-
    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';

include layouts/container.pug

include objects/heading.pug
include objects/rule.pug
include objects/badge.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
include objects/status-indicator.pug
include objects/avatar.pug
include objects/action-menu.pug
include objects/menu.pug
include objects/backdrop.pug
include objects/dialog.pug
include objects/lightbox.pug
include objects/list-group.pug
include objects/table.pug

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

mixin user-card(name, hue)
    -
        const avaName = name.slice(0, 1)

    .l-card.l-card--flush.l-card--75
        +avatar(block=true size='50' class='l-card__block' hue=hue)
            = avaName
        = name


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('xl')= 'Heading'
            +rule('medium')

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

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

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

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

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

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

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

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

            +h1-heading('xl')= 'Colored links'
            +rule('medium')

            +box
                .s-colored-links
                    = 'Lorem ipsum dolor '
                    a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
                    = ' sit amet, consetetur '
                    a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
                    = ' sadipscing elitr, sed diam nonumy eirmod tempor'

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

            +h1-heading('xl')= 'Badge'
            +rule('medium')

            +box
                +badge= '100'
                = ' '
                +badge('accent')= 'new'

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

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

            +box
                .l-button-group
                    +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
                .l-button-group
                    +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
                .l-button-group
                    +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('xl')= 'Text field'
            +rule('medium')

            +box
                div(style={ display: 'flex', gap: '1rem' })
                    +text-field(placeholder='Placeholder')
                    +text-field(value='Just landed in L.A.')
                    +text-field(value='Readonly' readonly=true)
                    +text-field(value='Incorrect input' pattern='a+' required=true)
                br
                div(style={ display: 'flex', gap: '1rem' })
                    +text-field(placeholder='Placeholder' disabled=true)
                    +text-field(value='Just landed in L.A.' disabled=true)
                    +text-field(value='Readonly' readonly=true disabled=true)
                    +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
                br
                div
                    +text-field(placeholder='Just landed in L.A.')
                        +slot('pre')
                            +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
                        +slot('post')
                            +action-button(quiet=true icon='smile' class='l-card__block')
                            +action-button(quiet=true icon='send' class='l-card__block')

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

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

            +box
                +field-label('First name')
                    +text-field(placeholder='Placeholder')
                br
                +field-label('Password', 'At least 6 characters required')
                    +text-field(placeholder='Placeholder' type='password')
                br
                +field-label('Password', 'At least 6 characters required')(invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                +field-label('First name')(disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                +field-label('Password', 'At least 6 characters required')(disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                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
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
                    +text-field(placeholder='Placeholder' type='password')
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                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
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
                    +text-field(placeholder='Placeholder' type='password')
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
                    +text-field(placeholder='Placeholder' type='password' invalid=true)
                br
                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' disabled=true)
                br
                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
                    +text-field(placeholder='Placeholder' type='password' disabled=true)
                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('xl')= 'Radio'
            +rule('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('xl')= 'Checkbox'
            +rule('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('xl')= 'Switch'
            +rule('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('xl')= 'Form'
            +rule('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('xl')= 'Action button'
            +rule('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)

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

            +h1-heading('xl')= 'Status indicator'
            +rule('medium')

            +box
                +status-indicator
                = ' '
                +status-indicator('green')
                = ' '
                +status-indicator('yellow')
                = ' '
                +status-indicator('red')

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

            +h1-heading('xl')= 'Avatar'
            +rule('medium')

            +box
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar
                        = 'Vo'
                    +avatar(status='green' hue=45)
                        = 'lp'
                    +avatar(src='avatar.png')
                    +avatar(src='avatar.png' status='red')
                br
                br
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar(size='75' hue=90)
                        = 'eo'
                    +avatar(size='75' status='green' hue=135)
                        = 'n'
                    +avatar(size='75' src='avatar.png')
                    +avatar(size='75' src='avatar.png' status='red')
                br
                br
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar(size='50' hue=180)
                        = 'V'
                    +avatar(size='50' hue=225)
                        = 'o'
                    +avatar(size='50' src='avatar.png')

            +box
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar(circle=true)
                        = 'Vo'
                    +avatar(circle=true status='green' hue=45)
                        = 'lp'
                    +avatar(circle=true src='avatar.png')
                    +avatar(circle=true src='avatar.png' status='red')
                br
                br
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar(circle=true size='75' hue=90)
                        = 'eo'
                    +avatar(circle=true size='75' status='green' hue=135)
                        = 'n'
                    +avatar(circle=true size='75' src='avatar.png')
                    +avatar(circle=true size='75' src='avatar.png' status='red')
                br
                br
                div(style={ display: 'flex', gap: '.3em' })
                    +avatar(circle=true size='50' hue=180)
                        = 'V'
                    +avatar(circle=true size='50' hue=225)
                        = 'o'
                    +avatar(circle=true size='50' src='avatar.png')

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

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

            +box
                div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
                    +action-button(quiet=true selected=true)= 'Menu'
                    +action-menu
                        +action-menu-slot(class='l-card l-card--flush')
                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
                            .l-card__block.l-card__block--main
                                strong.u-d-block= 'Volpeon'
                                small.u-d-block= '@volpeon@mk.vulpes.one'
                        +action-menu-separator
                        +action-menu-item(icon='user')= 'View profile'
                        +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
                        +action-menu-separator
                        +action-menu-item(icon='trash' disabled=true)= 'Delete'
                        +action-menu-item(icon='bookmark')= 'Bookmark'
                        +action-menu-item(icon='tags')= 'Tags'
                        +action-menu-item(postIcon='chevron-right')= 'More'

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

            +h1-heading('xl')= 'Menu'
            +rule('medium')

            +box
                div(style={ display: 'flex', gap: '3rem' })
                    +menu
                        +menu-header= 'Category 1'
                        +menu-item= 'Mark as away'
                        +menu-item= 'Delete'
                        +menu-separator
                        +menu-header= 'Category 2'
                        +menu-item(icon='bookmark')= 'Bookmark'
                        +menu-item(icon='tags')= 'Tags'

                    +menu
                        +menu-item
                            strong= 'Bouncer'
                        +menu-separator
                        +menu-item
                            strong= 'Libera'
                        +menu-item(icon='hash')= 'achannel'
                        +menu-item(icon='hash')= 'kitsuneirc'
                        +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
                        +menu-item(icon='red' iconIsStatus=true)= 'someone'
                        +menu-separator
                        +menu-item
                            strong= 'Ergo Testnet'
                        +menu-separator
                        +menu-item
                            strong= 'NixNet'

                    +menu
                        +menu-header= 'Operators'
                        +menu-item
                            +user-card('volpeon', 0)
                        +menu-item
                            +user-card('curiousfox', 90)
                        +menu-separator
                        +menu-header= 'Moderators'
                        +menu-item
                            +user-card('user3567', 135)
                        +menu-item
                            +user-card('johndoe', 270)

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

            +h1-heading('xl')= 'Backdrop'
            +rule('medium')

            +box
                +backdrop

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

            +h1-heading('xl')= 'Dialog'
            +rule('medium')

            +box
                +backdrop
                    +dialog('Lorem ipsum')
                        +slot('body')
                            = loremIpsum

            +box
                +backdrop
                    +dialog('Lorem ipsum')(bodyClass='l-overflow')
                        +slot('body')
                            p.u-mt-0= loremIpsum
                            p= loremIpsum
                            p= loremIpsum
                            p= loremIpsum
                            p= loremIpsum

            +box
                +backdrop
                    +dialog('Lorem ipsum')(noRule=true)
                        +slot('sidebar')
                            +menu(style={ 'min-width': '10em' })
                                +menu-header= '#channel'
                                +menu-item(icon='bookmark')= 'Bookmark'
                                +menu-item(icon='tags', selected=true)= 'Tags'
                                +menu-item(icon='hash')= 'achannel'
                        +slot('body')
                            p.u-mt-0= loremIpsum

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

            +h1-heading('xl')= 'Lightbox'
            +rule('medium')

            +box
                +backdrop(class='t-dark')
                    +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
                        = "Let's try multiple links! "
                        a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                            = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
                        = ' '
                        a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
                            = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
                        = ' '
                        a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
                            = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"

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

            +h1-heading('xl')= 'List group'
            +rule('medium')

            +box
                +list-group
                    +list-group-item= 'First item'
                    +list-group-item= 'Second item'
                    +list-group-item= 'Third item'
                    +list-group-item= 'Fourth item'

            +box
                +list-group
                    +list-group-item(action=true)= 'First item'
                    +list-group-item(action=true)= 'Second item'
                    +list-group-item(action=true)= 'Third item'
                    +list-group-item(action=true)= 'Fourth item'

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

            +h1-heading('xl')= 'Table'
            +rule('medium')

            +box
                +table(interactive=true)
                    +table-head
                        +table-row 
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                    +table-body
                        +table-row 
                            +table-cell= 'Row 1,1'
                            +table-cell= 'Row 1,2'
                            +table-cell= 'Row 1,3'
                        +table-row 
                            +table-cell= 'Row 2,1'
                            +table-cell= 'Row 2,2'
                            +table-cell= 'Row 2,3'
                        +table-row 
                            +table-cell= 'Row 3,1'
                            +table-cell= 'Row 3,2'
                            +table-cell= 'Row 3,3'
                        +table-row 
                            +table-cell= 'Row 4,1'
                            +table-cell= 'Row 4,2'
                            +table-cell= 'Row 4,3'

            +box
                +table(flush=true)
                    +table-head
                        +table-row 
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                    +table-body
                        +table-row 
                            +table-cell= 'Row 1,1'
                            +table-cell= 'Row 1,2'
                            +table-cell= 'Row 1,3'
                        +table-row 
                            +table-cell= 'Row 2,1'
                            +table-cell= 'Row 2,2'
                            +table-cell= 'Row 2,3'
                        +table-row 
                            +table-cell= 'Row 3,1'
                            +table-cell= 'Row 3,2'
                            +table-cell= 'Row 3,3'
                        +table-row 
                            +table-cell= 'Row 4,1'
                            +table-cell= 'Row 4,2'
                            +table-cell= 'Row 4,3'

            +box
                +table(box=true)
                    +table-head
                        +table-row 
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                    +table-body
                        +table-row 
                            +table-cell(divider=true)= 'Row 1,1'
                            +table-cell= 'Row 1,2'
                            +table-cell= 'Row 1,3'
                        +table-row 
                            +table-cell(divider=true)= 'Row 2,1'
                            +table-cell= 'Row 2,2'
                            +table-cell= 'Row 2,3'
                        +table-row 
                            +table-cell(divider=true)= 'Row 3,1'
                            +table-cell= 'Row 3,2'
                            +table-cell= 'Row 3,3'
                        +table-row 
                            +table-cell(divider=true)= 'Row 4,1'
                            +table-cell= 'Row 4,2'
                            +table-cell= 'Row 4,3'

            +box
                +table(box=true, size50=true)
                    +table-head
                        +table-row 
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                            +table-head-cell= 'Title'
                    +table-body
                        +table-row 
                            +table-cell= 'Row 1,1'
                            +table-cell= 'Row 1,2'
                            +table-cell= 'Row 1,3'
                        +table-row 
                            +table-cell= 'Row 2,1'
                            +table-cell= 'Row 2,2'
                            +table-cell= 'Row 2,3'
                        +table-row 
                            +table-cell= 'Row 3,1'
                            +table-cell= 'Row 3,2'
                            +table-cell= 'Row 3,3'
                        +table-row 
                            +table-cell= 'Row 4,1'
                            +table-cell= 'Row 4,2'
                            +table-cell= 'Row 4,3'