<div class="card w-100">
    {% if headline is not empty %}
        <div class="card-header">
            <h4 class="m-0">{{ headline }}</h4>
        </div>
    {% endif %}
    <div class="card-body">
        {% if pretext is not empty %}
            <p class="card-text">{{ pretext }}</p>
        {% endif %}
        <div class="form-group">
            <label for="demologinAccountTakeoverUsername{{rand}}" class="ml-0">Benutzername:</label>
            <input id="demologinAccountTakeoverUsername{{rand}}" type="text" maxlength="60" class="form-control demologinAccountTakeoverUsername demologinAccountTakeoverInput" placeholder="Benutzername">
            <small class="invalid-feedback">Der Benutzername ist ungültig.</small>
            <small class="text-danger d-none">Der Benutzername ist bereits vergeben.</small>
        </div>
        <div class="form-group mb-0">
            <label for="demologinAccountTakeoverMail{{rand}}" class="ml-0">E-Mail-Adresse:</label>
            <input id="demologinAccountTakeoverMail{{rand}}" type="email" maxlength="60" class="form-control demologinAccountTakeoverMail demologinAccountTakeoverInput" placeholder="E-Mail-Adresse">
            <small class="invalid-feedback">Die E-Mail-Adresse ist ungültig.</small>
            <small class="text-danger d-none">Die E-Mail-Adresse ist bereits vergeben.</small>
        </div>
        <p class="mt-2 mb-0 text-success demologinAccountTakeoverSuccess d-none">{{ successText|raw }}</p>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary demologinAccountTakeoverConfirm" type="button">{{ buttonText }}</button>
    </div>
  </div>