var MessageView = View.extend({
  el: "#message",

  events: {
    "click .discard_link": "discard",
  },

  action: "/api/message/",

  initialize: function () {
    this.template = this.$(".template").html();
    this.$el.empty().hide();
  },

  load: function (name) {
    name = sanitizeHTML(name) || "inbox";
    $.ajax({
      url: this.action + name,
      method: "get",
      success: this.populate.bind(this),
      error: app.router.error404,
    });
  },

  populate: function (data) {
    this.parse(data);
    $("body").removeClass("loading");
  },

  parse: function (data) {
    var message = data.message;
    //     var user = data.user

    $("h1").html(message.subject);
    var datetime = verbose_date(message.date);
    var id = message.id;
    var is_sender = message.sender === auth.user.username;
    var t = this.template
      .replace(/{{id}}/g, message.id)
      .replace(/{{sender}}/g, message.sender)
      .replace(/{{avatar}}/g, profile_image(message.sender))
      .replace(/{{subject}}/g, message.subject)
      .replace(/{{date}}/g, datetime[0])
      .replace(/{{time}}/g, datetime[1])
      .replace(/{{body}}/g, tidy_urls(message.body));
    var $t = $(t);
    if (is_sender) {
      $t.find(".reply_link").remove();
    }
    this.$el.empty().append($t).show();
  },

  discard: function (e) {
    var id = $(e.target).data("id");
    var ok = confirm("Really delete this message?");
    if (!ok) return;
    $.ajax({
      method: "delete",
      url: "/api/message/" + id,
      headers: { "csrf-token": csrf() },
      data: { _csrf: csrf() },
      success: function () {
        window.location.href = "/mail";
      },
      error: function () {
        window.location.href = "/mail";
      },
    });
  },
});