import { Component } from "//unpkg.com/can@5/ecosystem.mjs"; const styles = document.createElement("style"); styles.innerHTML = ` character-details-page { margin: 0 3em; } character-details-page .character-details { max-width: 400px; margin: 1em 3em; text-align: center; background-color: #00a1b7; border: 20px solid #00a1b7; border-radius: 10px; } character-details-page .character-details img { max-width: 100%; height: auto; border: 10px solid #fff; border-radius: 6px; } character-details-page .character-details h2 { font-size: 1.3em; color: #fff; text-shadow: 3px 4px 0 #000; letter-spacing: 8px; margin-top: 0; } character-details-page .character-details p { color: #fff; text-shadow: 2px 2px 0 #000; letter-spacing: 3px; } character-details-page .character-details p span { color: #000; text-shadow: none; } `; document.body.appendChild(styles); export default Component.extend({ tag: "character-details-page", view: `
{{# if(characterPromise.isPending) }}Status: {{status}}
Species: {{species}}
Location: {{location.name}}
Type: {{# if(type) }}{{type}}{{ else }}Unknown{{/ if }}
{{/ with }}