extends ./layout.pug
include ./_mixins.pug

block content
  -
    const name = "Ada Lovelace";
    const signedIn = true;
    const plan = "pro";
    const features = [
      {
        name: "Interpolation",
        description: "Drop values into text with #{name} and escaped output.",
        status: "ready",
        statusLabel: "ready"
      },
      {
        name: "Conditionals",
        description: "Render different branches with if, else if, else, and case.",
        status: "ready",
        statusLabel: "ready"
      },
      {
        name: "Loops",
        description: "Repeat markup with each item in collection syntax.",
        status: "ready",
        statusLabel: "ready"
      },
      {
        name: "Includes and extends",
        description: "Compose pages from layouts and smaller partial files.",
        status: "practice",
        statusLabel: "practice"
      },
      {
        name: "Mixins",
        description: "Create reusable snippets that accept arguments.",
        status: "ready",
        statusLabel: "ready"
      }
    ];

  header
    h1 Pug features for #{name}
    p.muted
      | This page is rendered from 
      code index.pug
      |  and extends 
      code layout.pug
      | .

  section.panel
    h2 Interpolation
    p Hello, #{name}. Your current plan is #{plan.toUpperCase()}.
    p
      | The literal syntax is 
      code #{'#{name}'}
      | , which inserts escaped text into a line.

  section.panel
    h2 Conditionals
    if signedIn
      p Welcome back, #{name}.
    else
      p Please sign in to see the demo.

    case plan
      when "free"
        p You are using the free plan.
      when "pro"
        p You are using the pro plan, so all examples are visible.
      default
        p Your plan is #{plan}.

  section.panel
    h2 Loops and Mixins
    ul.feature-grid
      each feature in features
        +featureCard(feature)

  include ./_summary.pug