{% set topics = frappe.get_all("Discussion Topic",
{"reference_doctype": doctype, "reference_docname": docname}, ["name", "title"]) %}

<div class="courses-header mt-10">
  <span>{{_('Discussions')}}</span>
  <div class="button is-primary pull-right reply">
    <img src="/assets/community/icons/small-add.svg">
    Start a Discussion
  </div>
</div>

{{ widgets.DiscussionComment(doctype=doctype, docname=docname) }}

<div class="common-card-style thread-card discussions-section" data-doctype="{{ doctype }}"
  data-docname="{{ docname }}">
  {% for topic in topics %}
  <div class="topic-parent" data-topic="{{ topic.name }}">
    <div class="font-weight-bold mb-5">{{ topic.title }}</div>
    {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
    ["reply", "owner", "creation"], order_by="creation")%}
    {% for reply in replies %}
    {% include "community/templates/reply_card.html" %}
    {% endfor %}
  </div>
  {% endfor %}
  {% if not topics %}
  <p id="no-discussions" class="text-center"> No discussions yet. </p>
  {% endif %}
</div>
<script>
  frappe.ready(() => {
    setup_socket_io();

    set_docname_if_missing();

    $(document).on("click", ".reply", (e) => {
      show_new_topic_modal(e);
    })
  })

  var show_new_topic_modal = (e) => {
    e.preventDefault();
    if (frappe.session.user == "Guest") {
      window.location.href = `/login?redirect-to=/discussions/`;
      return;
    }
    $("#discussion-modal").modal("show");
    var topic = $(e.currentTarget).attr("data-topic");
    $(".modal-headings").text(topic ? "Reply" : "Start a Discussion");
    topic ? $(".topic-title").addClass("hide") : $(".topic-title").removeClass("hide");
    $("#submit-discussion").attr("data-topic", topic ? topic : "");
  }

  var setup_socket_io = () => {
    const assets = [
      "/assets/frappe/js/lib/socket.io.min.js",
      "/assets/frappe/js/frappe/socketio_client.js",
    ]

    frappe.require(assets, () => {
      if (window.dev_server) {
        frappe.boot.socketio_port = "9000";
      }
      frappe.socketio.init(9000);
      frappe.socketio.socket.on("publish_message", (data) => {
        publish_message(data);
      })
    })
  }

  var publish_message = (data) => {
    if ($(`.topic-parent[data-topic=${data.topic_info.name}]`).length) {
      post_message_cleanup();
      $(`.topic-parent[data-topic=${data.topic_info.name}]`).append(data.template);
    }

    else if ((decodeURIComponent($(".discussions-section").attr("data-doctype")) == data.topic_info.reference_doctype
      && decodeURIComponent($(".discussions-section").attr("data-docname")) == data.topic_info.reference_docname)) {
      post_message_cleanup();
      var html = `<div class="topic-parent" data-topic="${data.topic_info.name}">
                        <div class="font-weight-bold mb-5">${data.topic_info.title}</div>
                        ${data.template}
                      </div>`;
      $(".discussions-section").prepend(html);
    }
  }

  var post_message_cleanup = () => {
    $(".comment-field").val("");
    $("#discussion-modal").modal("hide");
    $("#no-discussions").addClass("hide");
  }

  var set_docname_if_missing = () => {
    if ($("[data-docname='None']").length) {
      frappe.call({
        method: "community.community.doctype.discussion_topic.discussion_topic.get_docname",
        args: {
          "route": window.location.href.split("/").slice(-1)[0]
        },
        callback: (data) => {
          $("[data-docname='None']").attr("data-docname", data.message);
        }
      })
    }
  }
</script>