SpellGroupIcon < UIWidget
  size: 22 22
  image-size: 22 22
  image-source: /images/game/spells/cooldowns
  focusable: false
  margin-top: 3

SpellIcon < UIWidget
  size: 24 24
  image-size: 24 24
  focusable: false

  $!first:
    margin-left: 1

SpellProgressRect < UIProgressRect
  background: #585858AA
  percent: 100
  focusable: false

GroupCooldownParticles < UIParticles
  effect: groupcooldown-effect

MiniWindow
  id: cooldownWindow
  !text: tr('Spell Cooldowns')
  height: 82
  icon: /images/topbuttons/cooldowns
  @onClose: modules.game_cooldown.onMiniWindowClose()
  &save: true
  &autoOpen: false

  MiniWindowContents
    SpellGroupIcon
      id: groupIconAttack
      image-clip: 0 0 20 20
      anchors.top: parent.top
      anchors.left: parent.left
      margin-left: 2
      $on:
        image-clip: 0 20 20 20

    SpellProgressRect
      id: progressRectAttack
      anchors.fill: groupIconAttack
      !tooltip: tr('Attack')

    SpellGroupIcon
      id: groupIconHealing
      image-clip: 20 0 20 20
      anchors.top: parent.top
      anchors.left: groupIconAttack.right
      margin-left: 3
      $on:
        image-clip: 20 20 20 20

    SpellProgressRect
      id: progressRectHealing
      anchors.fill: groupIconHealing
      !tooltip: tr('Healing')

    SpellGroupIcon
      id: groupIconSupport
      image-clip: 40 0 20 20
      anchors.top: parent.top
      anchors.left: groupIconHealing.right
      margin-left: 3
      $on:
        image-clip: 40 20 20 20

    SpellProgressRect
      id: progressRectSupport
      anchors.fill: groupIconSupport
      !tooltip: tr('Support')

    SpellGroupIcon
      id: groupIconSpecial
      image-clip: 60 0 20 20
      anchors.top: parent.top
      anchors.left: groupIconSupport.right
      margin-left: 3
      $on:
        image-clip: 60 20 20 20

    SpellProgressRect
      id: progressRectSpecial
      anchors.fill: groupIconSpecial
      !tooltip: tr('Special')

    Panel
      id: cooldownPanel
      layout:
        type: horizontalBox
      height: 30
      margin-top: 3
      padding: 3
      anchors.top: groupIconSpecial.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      background-color: #00000022

