<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Encryption information</title>
  <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.js"></script>
  <script type="text/javascript" src="/assets/vue.global.v3.4.21.js"></script>
  <script type="text/javascript" src="/assets/translation.js"></script>
  <script type="text/javascript" src="/assets/script.js"></script>
  <link href="/assets/main.css" rel="stylesheet" />
</head>
<body>
  <div class="d-flex gap d-none" id="app">
    <div id="error" class="alert alert-error" v-if="error.length > 0">
      {{ error }}
    </div>
    <div>
      <div class="mt-3">
        {{ statusText }}
      </div>
      <button v-if="loaded" class="w-100 btn rounded-md fa" @click="view">{{ decryptButtonText }}</button>
    </div>
    <hr class="w-100 my-0" />
    <button class="d-none w-100 btn rounded-md fa">{{ i18nc("@action:button", "New secure email") }}</button>
    <button class="w-100 btn rounded-md" @click="newEmail()">New secure email</button>
    <button class="w-100 btn rounded-md" @click="reply">Reply securely</button>
    <button class="w-100 btn rounded-md" @click="forward">Forward securely</button>
    <div class="draft-container" v-if="loaded">
      <h2 class="mb-0">Drafts</h2>
      <ul v-if="status.drafts.length > 0" id="drafts" class="my-0 list-unstyled gap d-flex">
        <li v-for="draft in status.drafts" :key="draft.id" class="d-flex flex-row">
          <button class="btn w-100 d-flex flex-row align-items-center rounded-e-md" @click="openDraft(draft.id)">
            {{ i18n("Last Modified: ") + displayDate(draft.last_modification) }}
          </button>
          <button class="btn btn-danger ms-auto py-1 rounded-e-md" @click="deleteDraft(draft.id)">
            <span class="sr-only">{{ i18nc("@action:button", "Delete") }}</span> <span aria-hidden>X</span>
          </button>
        </li>
      </ul>
      <p v-else >{{ i18nc("Placeholder", "No draft found")}}</p>
    </div>
  </div>
</body>
</html>