- var recipe = {title: "Hearty Keto Hot Chocolate",subtitle: "Enjoy a delicous, smooth, and chocolatey drink without the guilt.",img: "https://i.imgur.com/NRoG6nu.jpg",tags:["Mexican","Drink","Ketogenic"],prepTime:"5 min",cookTime:"10 min",totalTime:"15 min",servings:2,ingredients:[{amount:"1",unit:"Tbsp",name:"butter, unsalted"},{amount:"1.5",unit:"tsp",name:"vanilla extract"},{unit:"pinch of",name:"sea salt"},{amount:"2",unit:"cups",name:"almond or coconut milk, unsweetened"},{amount:"1",unit:"Tbsp",name:"cocoa powder"},{amount:"1",unit:"Tbsp",name:"heavy whipping cream", optional:true},{unit:"dash of",name:"cinnamon",optional:true}],steps:["In a medium saucepan, melt the butter with the vanilla extract on medium heat.","Add the sea salt and milk. Simmer for 5 minutes and stir occassionally.","Add the cocoa powder and whisk thoroughly to eliminate any clumps. Simmer for 5 minutes, then serve immediately.","Optional: Serve with a splash of heavy cream and a sprinkle of cinnamon."],notes:["Do not add cocoa powder until the milk is completely heated to avoid large, unbreakable clumps from forming.", "Do not allow milk to boil; this will ruin the flavor."]}
section.section
  .container
    .columns.is-centered.is-mobile
      .column.is-10-tablet.is-7-widescreen
        article.recipe.box
          if recipe.img
            .recipe__img
              img(src=recipe.img alt=recipe.title)
          header.level
            .level-left
              .level-item
                div
                  if recipe.tags
                    ul.tags
                    each tag in recipe.tags
                      li.tag.is-uppercase=tag
                  h1.title=recipe.title
                  if recipe.subtitle
                    p.lead=recipe.subtitle
            .level-right
              .level-item
                div
                  .heading="Prep Time: "+recipe.prepTime
                  .heading="Cook Time: "+recipe.cookTime
                  .heading.has-text-weight-bold="Total Time: "+recipe.totalTime
            // Share and Print
            .recipe__share.field.has-addons
              .control
                .button.is-small.is-info
                  span.icon.is-small
                    span.fas.fa-fw.fa-print
                  span Print
              .control
                .button.is-small
                  span.icon.is-small
                    span.fas.fa-fw.fa-share
                  span Share
          // Body
          .recipe__content
            .level
              .level-left
                .level-item
                  h2.is-size-4 Ingredients:
              .level-right
                .level-item
                  .heading.label.is-small="Servings: " + recipe.servings
            ul.recipe__ingredients
              each ingredient in recipe.ingredients
                li 
                  label 
                    input(type="checkbox")
                    if ingredient.amount
                      span=ingredient.amount
                      |  
                    if ingredient.unit
                      span=ingredient.unit
                      |  
                    span=ingredient.name
                    if ingredient.optional
                      span.is-italic , (optional)
            br
            h2.is-size-4 Directions:
            div.content
              ol
                each step in recipe.steps
                  li=step
              footer.notification.is-italic
                h2.is-size-6 Notes:
                each note in recipe.notes
                  p=note
            

.recipe {
  border: 1px solid #eee;
  padding: 0;

  header {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 1rem 1rem 2rem 1rem;
  }

  &__img {
    overflow: hidden;
    height: 250px;
    img {
      object-fit: cover;
    }
  }

  &__share {
    position: absolute;
    top: -3rem;
    right: 1rem;
  }
  .recipe__content {
    padding: 1rem;
  }
  &__servings {
    width: 3rem;
  }
  // Ingredients
  &__ingredients {
    margin-top: 1rem;
    padding-left: 1rem;
    li {
      list-style-type: none;
    }
    label {
      cursor: pointer;
      &:hover {
        color: #3298dc;
      }
    }
    input {
      appearance: none;
      position: relative;
      &::before {
        color: #666;
        font-family: "Font Awesome 5 Free";
        content: "\f0c8";
        margin-right: 0.25rem;
      }
      &:checked {
        ~ span {
          font-style: italic;
          color: #666;
          text-decoration: line-through;
        }
        &::before {
          content: "\f14a";
        }
      }
    }
  }
}