new Dialog({
  title: 'Damage Roll Configuration',
  content: `
    <form>
      <div class="form-group">
        <label>Damage Roll:</label>
        <input type="text" name="damageRoll" value="2d4x" />
      </div>
      <div class="form-group">
        <label>AP:</label>
        <input type="number" name="ap" value="0" />
      </div>
      <div class="form-group">
        <label>Flavor:</label>
        <input type="text" name="flavor" value="" />
      </div>
    </form>
  `,
  buttons: {
    ok: {
      label: 'Roll Damage',
      callback: (html) => {
        const damageRoll = html.find('input[name="damageRoll"]').val()
        let flavor = html.find('input[name="flavor"]').val()
        const ap = parseInt(html.find('input[name="ap"]').val()) || 0
        const options = {}
        if (ap > 0) {
          flavor = `${flavor ? flavor + ' - ' : ''}AP: ${ap}`
          options.ap = ap
        }
        // Perform the damage roll and send the message
        new CONFIG.Dice.DamageRoll(damageRoll, null, options).toMessage({ flavor })
      }
    },
    cancel: {
      label: 'Cancel'
    }
  }
}).render(true)