Voom::Presenters.define(:image_lists) do
  attach :top_nav
  attach :component_drawer
  page_title 'Image Lists'

  grid do
    column 1
    column 8 do

      grid do
        column 12 do
          headline 'Standard with 5 columns'
          image_list do
            image 'img/demo/dog.png', label: 'Dog'
            image 'img/demo/dog.png', label: 'Dog'
            image 'img/demo/dog.png', label: 'Cat'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png', label: 'I have an action' do
              event :click do
                snackbar 'Clicked a dog!'
              end
            end
          end
        end
      end

      grid do
        column 12 do
          headline 'Text protection with 3 columns'
          image_list list_type: 'text-protection', columns: 3 do
            image 'img/demo/dog.png', label: 'Dog'
            image 'img/demo/dog.png', label: 'Dog'
            image 'img/demo/dog.png', label: 'Cat'
          end
        end
      end

      grid do
        column 12 do
          headline 'Masonry with 4 columns'
          image_list list_type: 'masonry', columns: 4 do
            image 'img/demo/image_card.jpg', label: 'Person'
            image 'img/demo/dog.png', label: 'Dog'
            image 'img/demo/dog.png', label: 'Cat'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
            image 'img/demo/dog.png'
          end
        end
      end

      grid do
        column 12 do
          headline 'Inherits image component border attributes'
          image_list list_type: 'standard', columns: 4 do
            image 'img/demo/image_card.jpg', label: 'No border'
            image 'img/demo/dog.png', label: 'Round', border_radius: '50%'
            image 'img/demo/image_card.jpg', label: 'Rounded Corners', border_radius: '5%'
            image 'img/demo/dog.png', label: 'Thick Border', border: '10px'
            image 'img/demo/image_card.jpg', label: 'Thin secondary border', border: '1px', border_color: :secondary
          end
        end
      end

      grid do
        column 12 do
          headline 'Image attributes applied globally'
          image_list list_type: 'standard', columns: 4, border_radius: '50%' do
            image 'img/demo/image_card.jpg'
            image 'img/demo/dog.png'
            image 'img/demo/image_card.jpg'
            image 'img/demo/dog.png'
            image 'img/demo/image_card.jpg'
          end
        end
      end

      grid do
        column 12 do
          headline 'Primary color border with spacing'
          image_list list_type: 'standard', columns: 4, border: '2px', border_color: :primary, spacing: '10px' do
            image 'img/demo/image_card.jpg'
            image 'img/demo/dog.png'
            image 'img/demo/image_card.jpg'
            image 'img/demo/dog.png'
            image 'img/demo/image_card.jpg'
          end
        end
      end

      attach :code, file: __FILE__

    end
  end
end