require_relative '../helpers/indented_grid'

Voom::Presenters.define(:cards) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Cards'

  indented_grid do
    headline 'Wide'
    card width: '512px' do
      media do
        image 'img/demo/welcome_card.jpg', width: 512, height: 176
        title 'Welcome', color: :white, position: :bottom
        button icon: :share_icon, color: :white do
          menu do
            item 'Share with mom'
          end
        end
      end
      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... "

      actions do
        button 'Get Started', color: :primary
      end
    end

    blank
    headline 'Square', inline: true
    switch checked: true do
      tooltip 'Hide/Show Square Card'
      event :click do
        toggle_visibility 'square_card'
      end
    end
    card id: 'square_card', width: '330px' do
      media height: '200px', color: '#46B6AC' do
        image 'img/demo/dog.png', position: [:bottom, :right]
        title 'Update', color: :white, position: :bottom
      end
      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."

      actions do
        button 'View Updates', color: :primary
      end
    end

    headline 'Image'
    card width: '330px' do
      media do
        image 'img/demo/image_card.jpg', width: 330, height: 330
        title 'image.jpg', position: :bottom, color: :white
      end
    end

    headline 'Event'
    card width: '330px' do
      media height: '230px', color: :MidnightBlue do
        title ['Featured event:',
               "May 24, 2016",
               "7-11pm"],
              color: :white, position: :top
      end
      actions do
        button 'Add to Calendar', color: :secondary
        button icon: :event, color: :secondary
      end
    end

    #
    # headline 'Example'
    # card width: '21rem', height: '42rem' do
    #   title ['Auckland Sky Tower',
    #          'Auckland, New Zealand'] do
    #     background 'https://www.askideas.com/media/43/The-Sky-Tower-In-Auckland-New-Zealand.jpg'
    #   end
    #   text ["The Sky Tower is an observation and telecommunications tower located in Auckland,",
    #         "New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure",
    #         "in the Southern Hemisphere."].join(' ')
    # end

    attach :code, file: __FILE__
  end
end