-- sql-icon --
without: {
  tableEx: {
    shape: sql_table
    a: b
  }
  classEx: {
    shape: class
    a: b
  }
  codeEx: |go
    a := 1
  |
  mdEx: |md
    # This is for all ill-treated fellows

    You will live a long, healthy, happy life and make bags of money.
  |
}

with: {
  tableEx: {
    shape: sql_table
    a: b
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  classEx: {
    shape: class
    a: b
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  codeEx: |go
    a := 1
  | {
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  mdEx: |md
    # This is for all ill-treated fellows

    You will live a long, healthy, happy life and make bags of money.
  | {
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
}

without.tableEx -> with.tableEx
without.classEx -> with.classEx
without.codeEx -> with.codeEx
without.mdEx -> with.mdEx

-- theme-overrides --

direction: right
vars: {
  d2-config: {
    theme-overrides: {
      B1: "#2E7D32"
      B2: "#66BB6A"
      B3: "#A5D6A7"
      B4: "#C5E1A5"
      B5: "#E6EE9C"
      B6: "#FFF59D"

      AA2: "#0D47A1"
      AA4: "#42A5F5"
      AA5: "#90CAF9"

      AB4: "#F44336"
      AB5: "#FFCDD2"

      N1: "#2E2E2E"
      N2: "#2E2E2E"
      N3: "#595959"
      N4: "#858585"
      N5: "#B1B1B1"
      N6: "#DCDCDC"
      N7: "#DCDCDC"
    }
    dark-theme-overrides: {
      B1: "#2E7D32"
      B2: "#66BB6A"
      B3: "#A5D6A7"
      B4: "#C5E1A5"
      B5: "#E6EE9C"
      B6: "#FFF59D"

      AA2: "#0D47A1"
      AA4: "#42A5F5"
      AA5: "#90CAF9"

      AB4: "#F44336"
      AB5: "#FFCDD2"

      N1: "#2E2E2E"
      N2: "#2E2E2E"
      N3: "#595959"
      N4: "#858585"
      N5: "#B1B1B1"
      N6: "#DCDCDC"
      N7: "#DCDCDC"
    }
  }
}

logs: {
  shape: page
  style.multiple: true
}
user: User {shape: person}
network: Network {
  tower: Cell Tower {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    satellites -> transmitter
    satellites -> transmitter
    satellites -> transmitter
    transmitter
  }
  processor: Data Processor {
    storage: Storage {
      shape: cylinder
      style.multiple: true
    }
  }
  portal: Online Portal {
    UI
  }

  tower.transmitter -> processor: phone logs
}
server: API Server

user -> network.tower: Make call
network.processor -> server
network.processor -> server
network.processor -> server

server -> logs
server -> logs
server -> logs: persist

server -> network.portal.UI: display
user -> network.portal.UI: access {
  style.stroke-dash: 3
}

costumes: {
  shape: sql_table
  id: int {constraint: primary_key}
  silliness: int
  monster: int
  last_updated: timestamp
}

monsters: {
  shape: sql_table
  id: int {constraint: primary_key}
  movie: string
  weight: int
  last_updated: timestamp
}

costumes.monster -> monsters.id

-- connection-underline --

a -> b: hi {
  style.underline: true
}

-- none-fill --

vars: {
  d2-config: {
    # Origami theme code
    theme-id: 302
  }
}
a.style.fill-pattern: none
b

-- width-smaller-than-label --
b: hello there cat {
  shape: person
  width: 64
  height: 66
}

-- width-smaller-than-label-custom-pos --
x: {
  width: 20
  label: long label
  label.near: center-center
}

-- nested-spread-substitutions-regression --
vars: {
  dog1: Frido {
    shape: circle
  }
  my-house: {
    label: "Home"
  }
}

ok: {
  ...${my-house}
  dog1: {
    ...${dog1}
  }
  dog1 -> dog3
}

-- bidirectional-connection-animation --
a <-> b: {style.animated: true}
a <-> c: {style.animated: true}
a <-> d: {style.animated: true}
a <-> e: {style.animated: true}
f <-> g: {style.animated: true}
x -- x: {style.animated: true}

-- opacity-zero-route --
grid: {
  *.style.opacity: 0
  grid-columns: 3
  a
  b
  c
  d
  e
  f
  g
  h

  d.style.opacity: 1
}

out -> grid.d

-- sketch-mode-circle-arrowhead --
vars: {
  d2-config: {
    sketch: true
  }
}

a
b
a <-> b: {
  source-arrowhead: {
    shape: circle
    style.filled: false
  }
}

x
y
z
x <-> y <-> z: {
  source-arrowhead: {
    shape: circle
    style.filled: false
  }
  direction: right
}

-- sketch-bidirectional-connection-animation --
vars: {
  d2-config: {
    sketch: true
  }
}

a <-> b: {style.animated: true}
a <-> c: {style.animated: true}
a <-> d: {style.animated: true}
a <-> e
f <-> g: {style.animated: true}
x -- x: {style.animated: true}