para {
  text_node 'ExpressUI uses Magnific Pop-up.'
  a(href: 'http://dimsemenov.com/plugins/magnific-popup/documentation.html', title: 'Magnific Pop-up documentation') { 'See documentation' }
  text_node 'and usage guidelines.'
}

para {
  text_node 'To add a header and footer/pop-up actions to the pop-up, you may use the '
  link_to '<code>popup()</code> component'.html_safe, uicomponents_path(anchor: "pop-up")
}

table {
  thead {
    th { "Class" }
    th { "Notes" }
  }
  tbody {
    tr {
      td {
        code { ".ae-popup-link" }
        text_node '+ href'
        code { "#sample-popup" }
      }
      td { "Required. This link triggers the pop-up" }
    }
    tr {
      td {
        code { ".ae-popup" }
        text_node '+ ID'
        code { "sample-popup" }
      }
      td { "Required. Pop-up contents" }
    }
    tr {
      td {
        code { ".ae-popup" }
        text_node '+'
        code { ".ae-popup-sm" }
        code { ".ae-popup-md" }
        code { ".ae-popup-lg" }
      }
      td { "Optional. Specify pop-up size" }
    }
  }
}


code_demo {
  %Q{
    a(href: "#sample-popup", class: "ae-popup-link ae-btn ae-btn-primary ae-btn-md") { 'Open Popup' }

    div(id: "sample-popup", class: "mfp-hide ae-popup ae-popup-sm") {
      para { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet vestibulum enim, eu malesuada dolor mollis a. Quisque mollis pulvinar enim id malesuada. Sed sit amet libero libero. Nullam velit erat, fringilla sit amet porttitor et, facilisis vitae lectus. Fusce eget nisl sagittis metus faucibus placerat et eget ligula. Duis eget augue maximus, fermentum velit at, bibendum nulla. Cras a libero mi. Sed ac feugiat justo. Maecenas euismod ex enim, eget auctor velit sollicitudin scelerisque. Suspendisse placerat pellentesque mauris nec accumsan. Quisque volutpat, sapien eget interdum fringilla, ex lectus aliquam elit, eget faucibus libero lectus a sem.'
      }
    }
  }
}