{% extends "base.html" %}

{% block title %}{{ t("cancel-page-title") }}{% endblock %}

{% block content %}
<div class="card">
  <h1>{{ t("cancel-heading") }}</h1>
  <p class="subtitle">{{ t("cancel-subtitle") }}</p>

  <div class="detail"><strong>{{ t("confirmed-detail-event") }}</strong> {{ event_title }}</div>
  <div class="detail"><strong>{{ t("confirmed-detail-date") }}</strong> {{ date_label }}</div>
  <div class="detail"><strong>{{ t("confirmed-detail-time") }}</strong> {{ start_time }} – {{ end_time }}</div>
  <div class="detail"><strong>{{ t("confirmed-detail-with") }}</strong> {{ host_name }}</div>
</div>

<div class="card">
  <form method="post">
    <div class="form-group">
      <label for="reason">{{ t("cancel-reason-label") }} <span class="hint">{{ t("common-reason-optional") }}</span></label>
      <textarea id="reason" name="reason" placeholder="{{ t('cancel-reason-placeholder-host') }}"></textarea>
    </div>
    <button type="submit" class="btn" style="background: var(--error-text);">{{ t("cancel-button") }}</button>
  </form>
</div>
{% endblock %}