import Foundation

/**
 An image that is part of the page content.

 A tap/click on the image shows a fullscreen version of the image, including an optional caption.
 */
struct PageImage: HtmlProducer {

    /// The HTML id attribute used to enable fullscreen images
    let imageId: String

    /// The small version of the image visible on the page
    let thumbnail: ImageSet

    /// The large version of the image for fullscreen view
    let largeImage: ImageSet

    /// The optional caption text below the fullscreen image
    let caption: String?

    func populate(_ result: inout String) {
        result += "<div class='content-image' onclick=\"document.getElementById('\(imageId)').classList.add('active')\">"
        result += thumbnail.content
        result += "</div>"
        result += "<div id='\(imageId)' class='fullscreen-image' onclick=\"document.getElementById('\(imageId)').classList.remove('active')\">"
        result += largeImage.content
        if let caption {
            result += "<div class='caption'>\(caption)</div>"
        }
        result += "<div class='close'></div>"
        result += "</div>"
    }
}
