import Elementary

/// The HTML page rendered for a not-found response.
struct ErrorPage: HTMLDocument, Sendable {

    // MARK: Document

    /// The page's content.
    var body: some HTML {
        h1 { "Page Not Found" }
        p { "Sorry, but the page you were trying to view does not exist." }
    }

    /// The metadata and inline styles placed in the document head.
    var head: some HTML {
        meta(.charset(.utf8))
        meta(
            .name(.viewport),
            .content("width=device-width, initial-scale=1")
        )
        style { Self.styles }
    }

    /// The document language.
    var lang: String { "en" }

    /// The document title.
    var title: String { "Page Not Found" }

}

// MARK: - Constants

private extension ErrorPage {
    /// The inline CSS applied to the page.
    static let styles = """
        * {
          line-height: 1.2;
          margin: 0;
        }

        html {
          color: #888;
          display: table;
          font-family: sans-serif;
          height: 100%;
          text-align: center;
          width: 100%;
        }

        body {
          display: table-cell;
          vertical-align: middle;
          margin: 2em auto;
        }

        h1 {
          color: #555;
          font-size: 2em;
          font-weight: 400;
        }

        p {
          margin: 0 auto;
          width: 280px;
        }

        @media only screen and (max-width: 280px) {
          body, p {
            width: 95%;
          }

          h1 {
            font-size: 1.5em;
            margin: 0 0 0.3em;
          }
        }
        """
}