{% load i18n %}

<div>
    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Encryption testing" %}</h5>
        <div class="card-body d-flex flex-column">
            <p class="card-text">{% trans "The text will be automatically copied to your clipboard." %}</p>
            <textarea class="form-control m-2" cols="50" rows="4" v-model="text" @keyup="encrypt_text(text)"></textarea>
            <p class="card-text text-danger" v-if="encryption_error">[[ encryption_error ]]</p>
            <textarea class="form-control m-2" cols="50" rows="4" v-model="encrypted" disabled></textarea>
        </div>
    </div>

    <div class="card mt-4 pt-2 ps-lg-2">
        <h5 class="card-header">{% trans "Decryption testing" %}</h5>
        <div class="card-body d-flex flex-column">
            <p class="card-text">{% trans "The text will be automatically copied to your clipboard." %}</p>
            <textarea class="form-control m-2" cols="50" rows="4" v-model="encrypted_text" @keyup="decrypt_text(encrypted_text)"></textarea>
            <p class="card-text text-danger" v-if="decryption_error">[[ decryption_error ]]</p>
            <textarea class="form-control m-2" cols="50" rows="4" v-model="decrypted" disabled></textarea>
        </div>
    </div>
</div>