var DetailsView = View.extend({
  events: {},

  action: "/api/thread/",
  keywordAction: "/api/keyword/",

  initialize: function (opt) {
    this.comments = new CommentsView({ parent: this });
    this.files = new FilesView({ parent: this });
    this.gallery = new GalleryView({ parent: this });
    this.form = new CommentForm({
      parent: this,
      onSubmit: this.onSubmit.bind(this),
    });
    this.threadbox = new ThreadBox({ parent: this });
    this.settings = new ThreadSettingsForm({ parent: this });
    $(".settings_link").click(this.openSettings.bind(this));
  },

  load: function (id) {
    id = id.replace(/\D/g, "");
    $.ajax({
      method: "get",
      url: this.action + id,
      success: this.populate.bind(this),
      error: app.router.error404,
    });
  },

  populate: function (data) {
    this.data = data;
    // console.log(data)
    set_background_color(
      data.thread.color || (data.keyword ? data.keyword.color : "plain")
    );
    $("body").removeClass("loading");
    var thread = data.thread;
    $("h1").html(sanitizeHTML(thread.title));
    $("title").html(sanitizeHTML(thread.title));
    $(".metadata").html(metadata(thread));
    $(".stream_link").attr("href", "/stream/thread/" + thread.id);
    $(".settings_link").attr("href", "/details/" + thread.id + "/settings");
    this.form.load(data.thread);
    this.comments.load(data.comments, data.thread);
    this.files.load(data.files, data.thread);
    this.gallery.load(this.files.sortedFiles, data.thread);
    if (data.thread.keyword) {
      $.get(
        this.keywordAction + data.thread.keyword,
        this.populateKeyword.bind(this)
      );
    } else {
      this.settings.loadThreads(null);
    }
    if (this.options.settings) {
      this.openSettings();
    }
  },

  populateKeyword: function (data) {
    this.threadbox.load(data);
    this.settings.loadThreads(data.threads);
  },

  openSettings: function (e) {
    e && e.preventDefault();
    this.settings.show();
  },

  onSubmit: function (data) {
    data.comment && this.comments.load([data.comment]);
    data.files && this.files.add(data.files);
    data.files && this.gallery.add(data.files);
  },
});