include data.pug

mixin navbarMixin(selectedItem)
    .navbar
        each navbarUrl,navbarName in navbarItems
            if navbarName == selectedItem
                a.navbar__link-wrapper(href=navbarUrl)
                    .navbar__item.navbar__item_selected #{navbarName}
            else
                a.navbar__link-wrapper(href=navbarUrl)
                    .navbar__item #{navbarName}

mixin infoCardsMinxin()
  each cardData in  smallCards 
    .small-card
        .small-card__content 
          h3.small-card__header #{cardData.header}
          p.small-card__text #{cardData.text}
          a.small-card__link(href=cardData.link) Подробнее»
        .small-card__image
          img(src=cardData.image alt=cardData.imageAlt)

mixin galleryMixin()
  each img in galleryImages
     img.gallery__image(src=img.src alt=img.alt)

mixin filtersMixin()
    details.filters
        summary.filters__summary Filters
        form.filters__form
            p 
                label(for='type') Type:
                select(id ='type')
            p   
                label(for='name') Name:
                input(type='text' id='name')
            p 
                label(for='manufacturer') Manufacturer name:
                input(type='text' id='manufacturer')
            p 
                label(for='sizeFrom') Size:
                | from 
                input(type='number' id='sizeFrom')
                |  to 
                input(type='number' id='sizeTo')
            p 
                label(for='releaseDateFrom') Release Date:
                | from 
                input(type='number' id='releaseDateFrom')
                |  to 
                input(type='number' id='releaseDateTo')
            p 
                label(for='priceFrom') Release Date:
                | from 
                input(type='number' id='priceFrom')
                |  to 
                input(type='number' id='priceTo')
            input.filter-group__button--apply(type='button' id='applyFiltersButton' value="Apply Filters")
            input.filter-group__button--reset(type='button' id='resetFiltersButton' value="Reset Filters")

mixin sortLevel(level)
    p 
        select.sort-level__select(id=`sort_${level}`)    
        |    ascending?
        input(type="checkbox", id=`sort_reverse_${level}`)
mixin sortingMixin()
    - const sortLevels = ['1', '2', '3'];
    details.sorting
        summary.sorting__summary Sort
        form.sorting__form
                each level in sortLevels
                    +sortLevel(level)
        input.sort-group__button--apply(type='button' id='applySortButton' value="Apply Sort")
        input.sort-group__button--reset(type='button'  id='resetSortButton' value="Reset Sort")


mixin graphXOption(option)
    if option.checked
        input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value checked)
    else
        input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value)
    label.axis-group__option-label(for=option.id) #{option.label}
    br

mixin graphYOption(option)
    if option.checked
        input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value checked)
    else
        input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value)
    label.values-group__option-label(for=option.id) #{option.label}
    br

mixin graphMixin()
    details.graph
        summary.graph__summary Graph
        form.graph__form
            fieldset.graph__fieldset
                .axis-group
                    i.axis-group__label 
                        b X axis
                    br
                    .axis-group__options
                        each option in axisOptions
                            +graphXOption(option)
                .values-group
                    i.values-group__label 
                        b Values
                    br
                    .values-group__options
                        each option in valueOptions
                            +graphYOption(option)
                        button.values-group__button(type="submit" id="build_graph" name="build_graph") Build