define(['exports', 'react', 'prop-types', 'react-helmet', 'react-intl', 'react-redux', 'react-infinite-scroller', 'redux', 'reselect', './index-ba8ec889', './request-ddfa17c1', './index-3130a914', 'immer', './saga-5fb20c1e', 'styled-components', './TopicsListComponent-d0f74d18', 'redux-saga/effects', 'js-cookie', 'react-moment', 'react-markdown', 'react-bootstrap/Container', 'react-bootstrap/Row', 'react-bootstrap/Col', 'react-mathjax2', 'remark-math', 'react-icons/fa', 'react-bootstrap/Button', 'react-mde', 'react-mde/lib/styles/css/react-mde-all.css', 'showdown', 'showdown-katex', './selectors-5abc75bf', 'hoist-non-react-statics', 'invariant', 'lodash', 'react-bootstrap/Breadcrumb', 'sanitize.css/sanitize.css', 'react-router-dom', 'connected-react-router', 'redux-saga', 'history'], function (exports, React, PropTypes, reactHelmet, reactIntl, reactRedux, InfiniteScroll, redux, reselect, index$1, request, index$2, produce, saga, styled, TopicsListComponent, effects, Cookies, Moment, ReactMarkdown, Container, Row, Col, MathJax, RemarkMathPlugin, fa, Button, ReactMde, reactMdeAll_css, Showdown, showdownKatex, selectors, hoistNonReactStatics, invariant, lodash, ReactBreadcrumb, sanitize_css, reactRouterDom, connectedReactRouter, createSagaMiddleware, history) { 'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
  var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
  var Cookies__default = /*#__PURE__*/_interopDefaultLegacy(Cookies);
  var Moment__default = /*#__PURE__*/_interopDefaultLegacy(Moment);
  var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
  var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
  var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
  var MathJax__default = /*#__PURE__*/_interopDefaultLegacy(MathJax);
  var RemarkMathPlugin__default = /*#__PURE__*/_interopDefaultLegacy(RemarkMathPlugin);
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
  var ReactMde__default = /*#__PURE__*/_interopDefaultLegacy(ReactMde);
  var Showdown__default = /*#__PURE__*/_interopDefaultLegacy(Showdown);
  var showdownKatex__default = /*#__PURE__*/_interopDefaultLegacy(showdownKatex);

  /*
   * AppConstants
   * Each action has a corresponding type, which the reducer knows and picks up on.
   * To avoid weird typos between the reducer and the actions, we save them as
   * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
   * reducers accidentally picking up actions they shouldn't.
   *
   * Follow this format:
   * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
   */
  const LOAD_THREAD = 'reactCommentsDjango/Thread/LOAD_THREAD';
  const LOAD_THREAD_SUCCESS = 'reactCommentsDjango/Thread/LOAD_THREAD_SUCCESS';
  const LOAD_THREAD_ERROR = 'reactCommentsDjango/Thread/LOAD_THREAD_ERROR';
  const LOAD_POSTS = 'reactCommentsDjango/Thread/LOAD_POSTS';
  const LOAD_POSTS_SUCCESS = 'reactCommentsDjango/Thread/LOAD_POSTS_SUCCESS';
  const LOAD_POSTS_ERROR = 'reactCommentsDjango/Thread/LOAD_POSTS_ERROR';
  const NEW_POST = 'reactCommentsDjango/Thread/NEW_POST';
  const NEW_POST_SUCCESS = 'reactCommentsDjango/Thread/NEW_POST_SUCCESS';
  const NEW_POST_ERROR = 'reactCommentsDjango/Thread/NEW_POST_ERROR';
  const UPDATE_POST = 'reactCommentsDjango/Thread/UPDATE_POST';
  const UPDATE_POST_SUCCESS = 'reactCommentsDjango/Thread/UPDATE_POST_SUCCESS';
  const UPDATE_POST_ERROR = 'reactCommentsDjango/Thread/UPDATE_POST_ERROR';
  const DELETE_POST = 'reactCommentsDjango/Thread/DELETE_POST';
  const DELETE_POST_SUCCESS = 'reactCommentsDjango/Thread/DELETE_POST_SUCCESS';
  const VOTE_POST = 'reactCommentsDjango/Thread/VOTE_POST';

  /*
   * ThreadListReducer
   *
   * The reducer takes care of our data. Using actions, we can
   * update our application state. To add a new action,
   * add it to the switch statement in the reducer function
   *
   */

  const initialState = {
    thread: false,
    postsList: false,
    newPost: false,
    updatedPost: null
  }; // TODO refactor this

  /* eslint-disable default-case, no-param-reassign */

  const threadReducer = (state = initialState, action) => produce__default['default'](state, draft => {
    switch (action.type) {
      case LOAD_THREAD:
        draft.loading = true;
        draft.error = false;
        draft.thread = false;
        break;

      case LOAD_THREAD_SUCCESS:
        draft.thread = action.thread;
        draft.loading = false;
        break;

      case LOAD_THREAD_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;

      case LOAD_POSTS:
        draft.loading = true;
        draft.error = false;
        draft.postsList = false;
        break;

      case LOAD_POSTS_SUCCESS:
        draft.postsList = action.postsList;
        draft.loading = false;
        break;

      case LOAD_POSTS_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;

      case NEW_POST:
        draft.loading = true;
        draft.error = false;
        draft.newPost = false;
        break;

      case NEW_POST_SUCCESS:
        draft.newPost = action.newPost;
        draft.loading = false;
        break;

      case NEW_POST_ERROR:
        draft.error = action.error;
        draft.loading = false;
        break;

      case UPDATE_POST_SUCCESS:
        draft.updatedPost = action.updatedPost;
        draft.loading = false;
        break;

      case DELETE_POST_SUCCESS:
        draft.deletedPost = action.deletedPost;
        break;
    }
  });

  /**
   * thread selectors
   */

  const selectThread = state => state.thread || initialState;

  const makeSelectThread = () => reselect.createSelector(selectThread, threadState => threadState.thread);

  const makeSelectPosts = () => reselect.createSelector(selectThread, threadState => threadState.postsList);

  const makeSelectNewPost = () => reselect.createSelector(selectThread, threadState => threadState.newPost);

  const makeSelectUpdatedPost = () => reselect.createSelector(selectThread, threadState => threadState.updatedPost);

  const makeSelectDeletedPost = () => reselect.createSelector(selectThread, threadState => threadState.deletedPost);

  const Section = styled__default['default'].section.withConfig({
    displayName: "Section",
    componentId: "ln8o29-0"
  })(["margin:3em auto;&:first-child{margin-top:0;}"]);

  const CenteredSection = styled__default['default'](Section).withConfig({
    displayName: "CenteredSection",
    componentId: "sc-1cnx69p-0"
  })(["text-align:center;"]);

  /*
   * App Actions
   *
   * Actions change things in your application
   * Since this boilerplate uses a uni-directional data flow, specifically redux,
   * we have these actions which are the only way your application interacts with
   * your application state. This guarantees that your state is up to date and nobody
   * messes it up weirdly somewhere.
   *
   * To add a new Action:
   * 1) Import your constant
   * 2) Add a function like this:
   *    export function yourAction(var) {
   *        return { type: YOUR_ACTION_CONSTANT, var: var }
   *    }
   */
  /**
   * Load the thread List, this action starts the request saga
   *
   * @return {object} An action object with a type of LOAD_THREAD
   */

  function loadThread(topicSlug, nextHref) {
    return {
      type: LOAD_THREAD,
      topicSlug,
      nextHref // comments (posts)

    };
  }
  /**
   * Dispatched when the thread List are loaded by the request saga
   *
   * @param  {array} threadList The thread List data
   *
   * @return {object}      An action object with a type of LOAD_THREAD_SUCCESS passing the threadList
   */

  function threadLoaded(thread) {
    return {
      type: LOAD_THREAD_SUCCESS,
      thread
    };
  }
  /**
   * Dispatched when loading the threadListitories fails
   *
   * @param  {object} error The error
   *
   * @return {object}       An action object with a type of LOAD_THREAD_ERROR passing the error
   */

  function threadLoadingError(error) {
    return {
      type: LOAD_THREAD_ERROR,
      error
    };
  }
  /**
   * Load the posts List, this action starts the request saga
   *
   * @return {object} An action object with a type of LOAD_POST
   */

  function loadPosts(threadId, nextHref) {
    return {
      type: LOAD_POSTS,
      threadId,
      nextHref // comments (posts)

    };
  }
  /**
   * Dispatched when the posts List are loaded by the request saga
   *
   * @param  {array} postList The post List data
   *
   * @return {object}      An action object with a type of LOAD_POST_SUCCESS passing the postList
   */

  function postsLoaded(postsList) {
    return {
      type: LOAD_POSTS_SUCCESS,
      postsList
    };
  }
  /**
   * Dispatched when loading the postListitories fails
   *
   * @param  {object} error The error
   *
   * @return {object}       An action object with a type of LOAD_POST_ERROR passing the error
   */

  function postsLoadingError(error) {
    return {
      type: LOAD_POSTS_ERROR,
      error
    };
  }
  function newPost$1(post) {
    return {
      type: NEW_POST,
      post
    };
  }
  function newPostSuccess(_newPost) {
    return {
      type: NEW_POST_SUCCESS,
      newPost: _newPost
    };
  }
  function newPostError(error) {
    return {
      type: NEW_POST_ERROR,
      error
    };
  }
  function updatePost$1(post) {
    return {
      type: UPDATE_POST,
      post
    };
  }
  function updatePostSuccess(_updatedPost) {
    return {
      type: UPDATE_POST_SUCCESS,
      updatedPost: _updatedPost
    };
  }
  function updatePostError(error) {
    return {
      type: UPDATE_POST_ERROR,
      error
    };
  }
  function votePost$1(post, vote) {
    return {
      type: VOTE_POST,
      post,
      vote
    };
  }
  function deletePost$1(post) {
    return {
      type: DELETE_POST,
      post
    };
  }
  function deletePostSuccess(_deletedPost) {
    return {
      type: DELETE_POST_SUCCESS,
      deletedPost: _deletedPost
    };
  }

  var threadActionsCreator = /*#__PURE__*/Object.freeze({
    __proto__: null,
    loadThread: loadThread,
    threadLoaded: threadLoaded,
    threadLoadingError: threadLoadingError,
    loadPosts: loadPosts,
    postsLoaded: postsLoaded,
    postsLoadingError: postsLoadingError,
    newPost: newPost$1,
    newPostSuccess: newPostSuccess,
    newPostError: newPostError,
    updatePost: updatePost$1,
    updatePostSuccess: updatePostSuccess,
    updatePostError: updatePostError,
    votePost: votePost$1,
    deletePost: deletePost$1,
    deletePostSuccess: deletePostSuccess
  });

  /*
   * App Actions
   *
   * Actions change things in your application
   * Since this boilerplate uses a uni-directional data flow, specifically redux,
   * we have these actions which are the only way your application interacts with
   * your application state. This guarantees that your state is up to date and nobody
   * messes it up weirdly somewhere.
   *
   * To add a new Action:
   * 1) Import your constant
   * 2) Add a function like this:
   *    export function yourAction(var) {
   *        return { type: YOUR_ACTION_CONSTANT, var: var }
   *    }
   */
  //  * Load the repositories, this action starts the request saga
  //  *
  //  * @return {object} An action object with a type of LOAD_REPOS
  //  */
  // export function loadRepos() {
  //   return {
  //     type: LOAD_REPOS,
  //   }
  // }
  //
  // /**
  //  * Dispatched when the repositories are loaded by the request saga
  //  *
  //  * @param  {array} repos The repository data
  //  * @param  {string} username The current username
  //  *
  //  * @return {object}      An action object with a type of LOAD_REPOS_SUCCESS passing the repos
  //  */
  // export function reposLoaded(repos, username) {
  //   return {
  //     type: LOAD_REPOS_SUCCESS,
  //     repos,
  //     username,
  //   }
  // }
  //
  // /**
  //  * Dispatched when loading the repositories fails
  //  *
  //  * @param  {object} error The error
  //  *
  //  * @return {object}       An action object with a type of LOAD_REPOS_ERROR passing the error
  //  */
  // export function repoLoadingError(error) {
  //   return {
  //     type: LOAD_REPOS_ERROR,
  //     error,
  //   }
  // }

  function loadSignedInUser() {
    return {
      type: TopicsListComponent.LOAD_SIGNED_IN_USER
    };
  }
  function signedInUserLoaded(signedInUser) {
    return {
      type: TopicsListComponent.LOAD_SIGNED_IN_USER_SUCCESS,
      signedInUser
    };
  }
  function signedInLoadingError(error) {
    return {
      type: TopicsListComponent.LOAD_SIGNED_IN_USER_ERROR,
      error
    };
  }

  var appActionsCreator = /*#__PURE__*/Object.freeze({
    __proto__: null,
    loadSignedInUser: loadSignedInUser,
    signedInUserLoaded: signedInUserLoaded,
    signedInLoadingError: signedInLoadingError
  });

  function getThread$1(threadId) {
    const url = `${index$1.API_PREFIX}threads/${threadId}/`;
    return request.request(url, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
  }

  function getPosts(threadId, nextHref) {
    let url;

    if (nextHref) {
      url = nextHref;
    } else {
      url = `${index$1.API_PREFIX}posts/?thread_id=${threadId}`;
    }

    return request.request(url, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
  }

  function newPostCall(post) {
    const csrftoken = Cookies__default['default'].get('csrftoken');
    return request.request(`${index$1.API_PREFIX}posts/`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(post)
    });
  }

  function updatePostCall(post) {
    const csrftoken = Cookies__default['default'].get('csrftoken');
    return request.request(`${index$1.API_PREFIX}posts/${post.uid}/`, {
      method: 'PUT',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(post)
    });
  }

  function deletePostCall(post) {
    const csrftoken = Cookies__default['default'].get('csrftoken');
    return request.request(`${index$1.API_PREFIX}posts/${post.uid}/`, {
      method: 'DELETE',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(post)
    });
  }

  function votePostCall(post, vote) {
    const csrftoken = Cookies__default['default'].get('csrftoken');
    return request.request(`${index$1.API_PREFIX}posts/${post.uid}/vote/`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify({
        vote
      })
    });
  }

  const Api$1 = {
    getThread: getThread$1,
    getPosts,
    newPostCall,
    updatePostCall,
    deletePostCall,
    votePostCall
  };

  function* getThread(sagaArgs) {
    const {
      nextHref,
      topicSlug
    } = sagaArgs; // const username = yield select(makeSelectUsername())

    try {
      // Call our request helper (see '../../utils/request')
      // const repos = yield call(request, requestURL)
      const threadList = yield effects.call(Api$1.getThread, topicSlug, nextHref);
      yield effects.put(threadLoaded(threadList));
    } catch (err) {
      yield effects.put(threadLoadingError(err));
    }
  }
  function* getPostsList(sagaArgs) {
    const {
      threadId,
      nextHref
    } = sagaArgs;

    try {
      const postsList = yield effects.call(Api$1.getPosts, threadId, nextHref);
      yield effects.put(postsLoaded(postsList));
    } catch (err) {
      yield effects.put(postsLoadingError(err));
    }
  }
  function* newPost(sagaArgs) {
    const {
      post
    } = sagaArgs;

    try {
      const newPost1 = yield effects.call(Api$1.newPostCall, post);
      yield effects.put(newPostSuccess(newPost1));
    } catch (err) {
      yield effects.put(newPostError(err));
    }
  }
  function* updatePost(sagaArgs) {
    const {
      post
    } = sagaArgs;

    try {
      const updatePost1 = yield effects.call(Api$1.updatePostCall, post);
      yield effects.put(updatePostSuccess(updatePost1));
    } catch (err) {
      yield effects.put(updatePostError(err));
    }
  }
  function* votePost(sagaArgs) {
    const {
      post,
      vote
    } = sagaArgs;

    try {
      const updatePost1 = yield effects.call(Api$1.votePostCall, post, vote);
      yield effects.put(updatePostSuccess(updatePost1));
    } catch (err) {
      yield effects.put(updatePostError(err));
    }
  }
  function* deletePost(sagaArgs) {
    const {
      post
    } = sagaArgs;

    try {
      const deletedPost = yield effects.call(Api$1.deletePostCall, post);
      yield effects.put(deletePostSuccess(deletedPost));
    } catch (err) {}
  }
  /**
   * Root saga manages watcher lifecycle
   */

  function* threadData() {
    // Watches for LOAD_REPOS actions and calls getThreadList when one comes in.
    // By using `takeLatest` only the result of the latest API call is applied.
    // It returns task descriptor (just like fork) so we can continue execution
    // It will be cancelled automatically on component unmount
    yield effects.all([effects.takeLatest(LOAD_THREAD, getThread), effects.takeLatest(LOAD_POSTS, getPostsList), effects.takeLatest(NEW_POST, newPost), effects.takeLatest(UPDATE_POST, updatePost), effects.takeLatest(DELETE_POST, deletePost), effects.takeLatest(VOTE_POST, votePost)]);
  }

  function getSignedInUser$1() {
    const conf = window.REACT_COMMENTS_DJANGO_CONFIG;
    let API_PROFILE_URL = `${index$1.API_PREFIX}users/me/`;

    if (conf && 'API_PROFILE_URL' in conf) {
      ({
        API_PROFILE_URL
      } = conf);
    }

    const response = request.request(API_PROFILE_URL, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
    return response;
  }

  const Api = {
    getSignedInUser: getSignedInUser$1
  };

  /**
   * Gets the repositories of the user from Github
   */
  function* getSignedInUser() {
    // Select username from store
    // const username = yield select(makeSelectUsername())
    try {
      const user = yield effects.call(Api.getSignedInUser);
      yield effects.put(signedInUserLoaded(user));
    } catch (err) {
      yield effects.put(signedInLoadingError(err));
      yield effects.put(signedInUserLoaded(undefined));
    }
  }
  /**
   * Root saga manages watcher lifecycle
   */

  function* appData() {
    // Watches for LOAD_REPOS actions and calls getRepos when one comes in.
    // By using `takeLatest` only the result of the latest API call is applied.
    // It returns task descriptor (just like fork) so we can continue execution
    // It will be cancelled automatically on component unmount
    yield effects.takeLatest(TopicsListComponent.LOAD_SIGNED_IN_USER, getSignedInUser);
  }

  function styleInject(css, ref) {
    if (ref === void 0) ref = {};
    var insertAt = ref.insertAt;

    if (!css || typeof document === 'undefined') {
      return;
    }

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';

    if (insertAt === 'top') {
      if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
      } else {
        head.appendChild(style);
      }
    } else {
      head.appendChild(style);
    }

    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }

  var css_248z = "/* stylelint-disable font-family-no-missing-generic-family-keyword */\n@font-face {\n  font-family: 'KaTeX_AMS';\n  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Caligraphic';\n  src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Bold.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Bold.ttf) format('truetype');\n  font-weight: bold;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Caligraphic';\n  src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Regular.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Fraktur';\n  src: url(fonts/KaTeX_Fraktur-Bold.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Bold.woff) format('woff'), url(fonts/KaTeX_Fraktur-Bold.ttf) format('truetype');\n  font-weight: bold;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Fraktur';\n  src: url(fonts/KaTeX_Fraktur-Regular.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Regular.woff) format('woff'), url(fonts/KaTeX_Fraktur-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Main';\n  src: url(fonts/KaTeX_Main-Bold.woff2) format('woff2'), url(fonts/KaTeX_Main-Bold.woff) format('woff'), url(fonts/KaTeX_Main-Bold.ttf) format('truetype');\n  font-weight: bold;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Main';\n  src: url(fonts/KaTeX_Main-BoldItalic.woff2) format('woff2'), url(fonts/KaTeX_Main-BoldItalic.woff) format('woff'), url(fonts/KaTeX_Main-BoldItalic.ttf) format('truetype');\n  font-weight: bold;\n  font-style: italic;\n}\n@font-face {\n  font-family: 'KaTeX_Main';\n  src: url(fonts/KaTeX_Main-Italic.woff2) format('woff2'), url(fonts/KaTeX_Main-Italic.woff) format('woff'), url(fonts/KaTeX_Main-Italic.ttf) format('truetype');\n  font-weight: normal;\n  font-style: italic;\n}\n@font-face {\n  font-family: 'KaTeX_Main';\n  src: url(fonts/KaTeX_Main-Regular.woff2) format('woff2'), url(fonts/KaTeX_Main-Regular.woff) format('woff'), url(fonts/KaTeX_Main-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Math';\n  src: url(fonts/KaTeX_Math-BoldItalic.woff2) format('woff2'), url(fonts/KaTeX_Math-BoldItalic.woff) format('woff'), url(fonts/KaTeX_Math-BoldItalic.ttf) format('truetype');\n  font-weight: bold;\n  font-style: italic;\n}\n@font-face {\n  font-family: 'KaTeX_Math';\n  src: url(fonts/KaTeX_Math-Italic.woff2) format('woff2'), url(fonts/KaTeX_Math-Italic.woff) format('woff'), url(fonts/KaTeX_Math-Italic.ttf) format('truetype');\n  font-weight: normal;\n  font-style: italic;\n}\n@font-face {\n  font-family: 'KaTeX_SansSerif';\n  src: url(fonts/KaTeX_SansSerif-Bold.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Bold.woff) format('woff'), url(fonts/KaTeX_SansSerif-Bold.ttf) format('truetype');\n  font-weight: bold;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_SansSerif';\n  src: url(fonts/KaTeX_SansSerif-Italic.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Italic.woff) format('woff'), url(fonts/KaTeX_SansSerif-Italic.ttf) format('truetype');\n  font-weight: normal;\n  font-style: italic;\n}\n@font-face {\n  font-family: 'KaTeX_SansSerif';\n  src: url(fonts/KaTeX_SansSerif-Regular.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Regular.woff) format('woff'), url(fonts/KaTeX_SansSerif-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Script';\n  src: url(fonts/KaTeX_Script-Regular.woff2) format('woff2'), url(fonts/KaTeX_Script-Regular.woff) format('woff'), url(fonts/KaTeX_Script-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Size1';\n  src: url(fonts/KaTeX_Size1-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size1-Regular.woff) format('woff'), url(fonts/KaTeX_Size1-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Size2';\n  src: url(fonts/KaTeX_Size2-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size2-Regular.woff) format('woff'), url(fonts/KaTeX_Size2-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Size3';\n  src: url(fonts/KaTeX_Size3-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size3-Regular.woff) format('woff'), url(fonts/KaTeX_Size3-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Size4';\n  src: url(fonts/KaTeX_Size4-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size4-Regular.woff) format('woff'), url(fonts/KaTeX_Size4-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'KaTeX_Typewriter';\n  src: url(fonts/KaTeX_Typewriter-Regular.woff2) format('woff2'), url(fonts/KaTeX_Typewriter-Regular.woff) format('woff'), url(fonts/KaTeX_Typewriter-Regular.ttf) format('truetype');\n  font-weight: normal;\n  font-style: normal;\n}\n.katex {\n  font: normal 1.21em KaTeX_Main, Times New Roman, serif;\n  line-height: 1.2;\n  text-indent: 0;\n  text-rendering: auto;\n}\n.katex * {\n  -ms-high-contrast-adjust: none !important;\n}\n.katex .katex-version::after {\n  content: \"0.10.2\";\n}\n.katex .katex-mathml {\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n  padding: 0;\n  border: 0;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n}\n.katex .katex-html {\n  /* \\newline is an empty block at top level, between .base elements */\n}\n.katex .katex-html > .newline {\n  display: block;\n}\n.katex .base {\n  position: relative;\n  display: inline-block;\n  white-space: nowrap;\n  width: min-content;\n}\n.katex .strut {\n  display: inline-block;\n}\n.katex .textbf {\n  font-weight: bold;\n}\n.katex .textit {\n  font-style: italic;\n}\n.katex .textrm {\n  font-family: KaTeX_Main;\n}\n.katex .textsf {\n  font-family: KaTeX_SansSerif;\n}\n.katex .texttt {\n  font-family: KaTeX_Typewriter;\n}\n.katex .mathdefault {\n  font-family: KaTeX_Math;\n  font-style: italic;\n}\n.katex .mathit {\n  font-family: KaTeX_Main;\n  font-style: italic;\n}\n.katex .mathrm {\n  font-style: normal;\n}\n.katex .mathbf {\n  font-family: KaTeX_Main;\n  font-weight: bold;\n}\n.katex .boldsymbol {\n  font-family: KaTeX_Math;\n  font-weight: bold;\n  font-style: italic;\n}\n.katex .amsrm {\n  font-family: KaTeX_AMS;\n}\n.katex .mathbb,\n.katex .textbb {\n  font-family: KaTeX_AMS;\n}\n.katex .mathcal {\n  font-family: KaTeX_Caligraphic;\n}\n.katex .mathfrak,\n.katex .textfrak {\n  font-family: KaTeX_Fraktur;\n}\n.katex .mathtt {\n  font-family: KaTeX_Typewriter;\n}\n.katex .mathscr,\n.katex .textscr {\n  font-family: KaTeX_Script;\n}\n.katex .mathsf,\n.katex .textsf {\n  font-family: KaTeX_SansSerif;\n}\n.katex .mathboldsf,\n.katex .textboldsf {\n  font-family: KaTeX_SansSerif;\n  font-weight: bold;\n}\n.katex .mathitsf,\n.katex .textitsf {\n  font-family: KaTeX_SansSerif;\n  font-style: italic;\n}\n.katex .mainrm {\n  font-family: KaTeX_Main;\n  font-style: normal;\n}\n.katex .vlist-t {\n  display: inline-table;\n  table-layout: fixed;\n}\n.katex .vlist-r {\n  display: table-row;\n}\n.katex .vlist {\n  display: table-cell;\n  vertical-align: bottom;\n  position: relative;\n}\n.katex .vlist > span {\n  display: block;\n  height: 0;\n  position: relative;\n}\n.katex .vlist > span > span {\n  display: inline-block;\n}\n.katex .vlist > span > .pstrut {\n  overflow: hidden;\n  width: 0;\n}\n.katex .vlist-t2 {\n  margin-right: -2px;\n}\n.katex .vlist-s {\n  display: table-cell;\n  vertical-align: bottom;\n  font-size: 1px;\n  width: 2px;\n  min-width: 2px;\n}\n.katex .msupsub {\n  text-align: left;\n}\n.katex .mfrac > span > span {\n  text-align: center;\n}\n.katex .mfrac .frac-line {\n  display: inline-block;\n  width: 100%;\n  border-bottom-style: solid;\n}\n.katex .mfrac .frac-line,\n.katex .overline .overline-line,\n.katex .underline .underline-line,\n.katex .hline,\n.katex .hdashline,\n.katex .rule {\n  min-height: 1px;\n}\n.katex .mspace {\n  display: inline-block;\n}\n.katex .llap,\n.katex .rlap,\n.katex .clap {\n  width: 0;\n  position: relative;\n}\n.katex .llap > .inner,\n.katex .rlap > .inner,\n.katex .clap > .inner {\n  position: absolute;\n}\n.katex .llap > .fix,\n.katex .rlap > .fix,\n.katex .clap > .fix {\n  display: inline-block;\n}\n.katex .llap > .inner {\n  right: 0;\n}\n.katex .rlap > .inner,\n.katex .clap > .inner {\n  left: 0;\n}\n.katex .clap > .inner > span {\n  margin-left: -50%;\n  margin-right: 50%;\n}\n.katex .rule {\n  display: inline-block;\n  border: solid 0;\n  position: relative;\n}\n.katex .overline .overline-line,\n.katex .underline .underline-line,\n.katex .hline {\n  display: inline-block;\n  width: 100%;\n  border-bottom-style: solid;\n}\n.katex .hdashline {\n  display: inline-block;\n  width: 100%;\n  border-bottom-style: dashed;\n}\n.katex .sqrt > .root {\n  margin-left: 0.27777778em;\n  margin-right: -0.55555556em;\n}\n.katex .sizing,\n.katex .fontsize-ensurer {\n  display: inline-block;\n}\n.katex .sizing.reset-size1.size1,\n.katex .fontsize-ensurer.reset-size1.size1 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size1.size2,\n.katex .fontsize-ensurer.reset-size1.size2 {\n  font-size: 1.2em;\n}\n.katex .sizing.reset-size1.size3,\n.katex .fontsize-ensurer.reset-size1.size3 {\n  font-size: 1.4em;\n}\n.katex .sizing.reset-size1.size4,\n.katex .fontsize-ensurer.reset-size1.size4 {\n  font-size: 1.6em;\n}\n.katex .sizing.reset-size1.size5,\n.katex .fontsize-ensurer.reset-size1.size5 {\n  font-size: 1.8em;\n}\n.katex .sizing.reset-size1.size6,\n.katex .fontsize-ensurer.reset-size1.size6 {\n  font-size: 2em;\n}\n.katex .sizing.reset-size1.size7,\n.katex .fontsize-ensurer.reset-size1.size7 {\n  font-size: 2.4em;\n}\n.katex .sizing.reset-size1.size8,\n.katex .fontsize-ensurer.reset-size1.size8 {\n  font-size: 2.88em;\n}\n.katex .sizing.reset-size1.size9,\n.katex .fontsize-ensurer.reset-size1.size9 {\n  font-size: 3.456em;\n}\n.katex .sizing.reset-size1.size10,\n.katex .fontsize-ensurer.reset-size1.size10 {\n  font-size: 4.148em;\n}\n.katex .sizing.reset-size1.size11,\n.katex .fontsize-ensurer.reset-size1.size11 {\n  font-size: 4.976em;\n}\n.katex .sizing.reset-size2.size1,\n.katex .fontsize-ensurer.reset-size2.size1 {\n  font-size: 0.83333333em;\n}\n.katex .sizing.reset-size2.size2,\n.katex .fontsize-ensurer.reset-size2.size2 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size2.size3,\n.katex .fontsize-ensurer.reset-size2.size3 {\n  font-size: 1.16666667em;\n}\n.katex .sizing.reset-size2.size4,\n.katex .fontsize-ensurer.reset-size2.size4 {\n  font-size: 1.33333333em;\n}\n.katex .sizing.reset-size2.size5,\n.katex .fontsize-ensurer.reset-size2.size5 {\n  font-size: 1.5em;\n}\n.katex .sizing.reset-size2.size6,\n.katex .fontsize-ensurer.reset-size2.size6 {\n  font-size: 1.66666667em;\n}\n.katex .sizing.reset-size2.size7,\n.katex .fontsize-ensurer.reset-size2.size7 {\n  font-size: 2em;\n}\n.katex .sizing.reset-size2.size8,\n.katex .fontsize-ensurer.reset-size2.size8 {\n  font-size: 2.4em;\n}\n.katex .sizing.reset-size2.size9,\n.katex .fontsize-ensurer.reset-size2.size9 {\n  font-size: 2.88em;\n}\n.katex .sizing.reset-size2.size10,\n.katex .fontsize-ensurer.reset-size2.size10 {\n  font-size: 3.45666667em;\n}\n.katex .sizing.reset-size2.size11,\n.katex .fontsize-ensurer.reset-size2.size11 {\n  font-size: 4.14666667em;\n}\n.katex .sizing.reset-size3.size1,\n.katex .fontsize-ensurer.reset-size3.size1 {\n  font-size: 0.71428571em;\n}\n.katex .sizing.reset-size3.size2,\n.katex .fontsize-ensurer.reset-size3.size2 {\n  font-size: 0.85714286em;\n}\n.katex .sizing.reset-size3.size3,\n.katex .fontsize-ensurer.reset-size3.size3 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size3.size4,\n.katex .fontsize-ensurer.reset-size3.size4 {\n  font-size: 1.14285714em;\n}\n.katex .sizing.reset-size3.size5,\n.katex .fontsize-ensurer.reset-size3.size5 {\n  font-size: 1.28571429em;\n}\n.katex .sizing.reset-size3.size6,\n.katex .fontsize-ensurer.reset-size3.size6 {\n  font-size: 1.42857143em;\n}\n.katex .sizing.reset-size3.size7,\n.katex .fontsize-ensurer.reset-size3.size7 {\n  font-size: 1.71428571em;\n}\n.katex .sizing.reset-size3.size8,\n.katex .fontsize-ensurer.reset-size3.size8 {\n  font-size: 2.05714286em;\n}\n.katex .sizing.reset-size3.size9,\n.katex .fontsize-ensurer.reset-size3.size9 {\n  font-size: 2.46857143em;\n}\n.katex .sizing.reset-size3.size10,\n.katex .fontsize-ensurer.reset-size3.size10 {\n  font-size: 2.96285714em;\n}\n.katex .sizing.reset-size3.size11,\n.katex .fontsize-ensurer.reset-size3.size11 {\n  font-size: 3.55428571em;\n}\n.katex .sizing.reset-size4.size1,\n.katex .fontsize-ensurer.reset-size4.size1 {\n  font-size: 0.625em;\n}\n.katex .sizing.reset-size4.size2,\n.katex .fontsize-ensurer.reset-size4.size2 {\n  font-size: 0.75em;\n}\n.katex .sizing.reset-size4.size3,\n.katex .fontsize-ensurer.reset-size4.size3 {\n  font-size: 0.875em;\n}\n.katex .sizing.reset-size4.size4,\n.katex .fontsize-ensurer.reset-size4.size4 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size4.size5,\n.katex .fontsize-ensurer.reset-size4.size5 {\n  font-size: 1.125em;\n}\n.katex .sizing.reset-size4.size6,\n.katex .fontsize-ensurer.reset-size4.size6 {\n  font-size: 1.25em;\n}\n.katex .sizing.reset-size4.size7,\n.katex .fontsize-ensurer.reset-size4.size7 {\n  font-size: 1.5em;\n}\n.katex .sizing.reset-size4.size8,\n.katex .fontsize-ensurer.reset-size4.size8 {\n  font-size: 1.8em;\n}\n.katex .sizing.reset-size4.size9,\n.katex .fontsize-ensurer.reset-size4.size9 {\n  font-size: 2.16em;\n}\n.katex .sizing.reset-size4.size10,\n.katex .fontsize-ensurer.reset-size4.size10 {\n  font-size: 2.5925em;\n}\n.katex .sizing.reset-size4.size11,\n.katex .fontsize-ensurer.reset-size4.size11 {\n  font-size: 3.11em;\n}\n.katex .sizing.reset-size5.size1,\n.katex .fontsize-ensurer.reset-size5.size1 {\n  font-size: 0.55555556em;\n}\n.katex .sizing.reset-size5.size2,\n.katex .fontsize-ensurer.reset-size5.size2 {\n  font-size: 0.66666667em;\n}\n.katex .sizing.reset-size5.size3,\n.katex .fontsize-ensurer.reset-size5.size3 {\n  font-size: 0.77777778em;\n}\n.katex .sizing.reset-size5.size4,\n.katex .fontsize-ensurer.reset-size5.size4 {\n  font-size: 0.88888889em;\n}\n.katex .sizing.reset-size5.size5,\n.katex .fontsize-ensurer.reset-size5.size5 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size5.size6,\n.katex .fontsize-ensurer.reset-size5.size6 {\n  font-size: 1.11111111em;\n}\n.katex .sizing.reset-size5.size7,\n.katex .fontsize-ensurer.reset-size5.size7 {\n  font-size: 1.33333333em;\n}\n.katex .sizing.reset-size5.size8,\n.katex .fontsize-ensurer.reset-size5.size8 {\n  font-size: 1.6em;\n}\n.katex .sizing.reset-size5.size9,\n.katex .fontsize-ensurer.reset-size5.size9 {\n  font-size: 1.92em;\n}\n.katex .sizing.reset-size5.size10,\n.katex .fontsize-ensurer.reset-size5.size10 {\n  font-size: 2.30444444em;\n}\n.katex .sizing.reset-size5.size11,\n.katex .fontsize-ensurer.reset-size5.size11 {\n  font-size: 2.76444444em;\n}\n.katex .sizing.reset-size6.size1,\n.katex .fontsize-ensurer.reset-size6.size1 {\n  font-size: 0.5em;\n}\n.katex .sizing.reset-size6.size2,\n.katex .fontsize-ensurer.reset-size6.size2 {\n  font-size: 0.6em;\n}\n.katex .sizing.reset-size6.size3,\n.katex .fontsize-ensurer.reset-size6.size3 {\n  font-size: 0.7em;\n}\n.katex .sizing.reset-size6.size4,\n.katex .fontsize-ensurer.reset-size6.size4 {\n  font-size: 0.8em;\n}\n.katex .sizing.reset-size6.size5,\n.katex .fontsize-ensurer.reset-size6.size5 {\n  font-size: 0.9em;\n}\n.katex .sizing.reset-size6.size6,\n.katex .fontsize-ensurer.reset-size6.size6 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size6.size7,\n.katex .fontsize-ensurer.reset-size6.size7 {\n  font-size: 1.2em;\n}\n.katex .sizing.reset-size6.size8,\n.katex .fontsize-ensurer.reset-size6.size8 {\n  font-size: 1.44em;\n}\n.katex .sizing.reset-size6.size9,\n.katex .fontsize-ensurer.reset-size6.size9 {\n  font-size: 1.728em;\n}\n.katex .sizing.reset-size6.size10,\n.katex .fontsize-ensurer.reset-size6.size10 {\n  font-size: 2.074em;\n}\n.katex .sizing.reset-size6.size11,\n.katex .fontsize-ensurer.reset-size6.size11 {\n  font-size: 2.488em;\n}\n.katex .sizing.reset-size7.size1,\n.katex .fontsize-ensurer.reset-size7.size1 {\n  font-size: 0.41666667em;\n}\n.katex .sizing.reset-size7.size2,\n.katex .fontsize-ensurer.reset-size7.size2 {\n  font-size: 0.5em;\n}\n.katex .sizing.reset-size7.size3,\n.katex .fontsize-ensurer.reset-size7.size3 {\n  font-size: 0.58333333em;\n}\n.katex .sizing.reset-size7.size4,\n.katex .fontsize-ensurer.reset-size7.size4 {\n  font-size: 0.66666667em;\n}\n.katex .sizing.reset-size7.size5,\n.katex .fontsize-ensurer.reset-size7.size5 {\n  font-size: 0.75em;\n}\n.katex .sizing.reset-size7.size6,\n.katex .fontsize-ensurer.reset-size7.size6 {\n  font-size: 0.83333333em;\n}\n.katex .sizing.reset-size7.size7,\n.katex .fontsize-ensurer.reset-size7.size7 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size7.size8,\n.katex .fontsize-ensurer.reset-size7.size8 {\n  font-size: 1.2em;\n}\n.katex .sizing.reset-size7.size9,\n.katex .fontsize-ensurer.reset-size7.size9 {\n  font-size: 1.44em;\n}\n.katex .sizing.reset-size7.size10,\n.katex .fontsize-ensurer.reset-size7.size10 {\n  font-size: 1.72833333em;\n}\n.katex .sizing.reset-size7.size11,\n.katex .fontsize-ensurer.reset-size7.size11 {\n  font-size: 2.07333333em;\n}\n.katex .sizing.reset-size8.size1,\n.katex .fontsize-ensurer.reset-size8.size1 {\n  font-size: 0.34722222em;\n}\n.katex .sizing.reset-size8.size2,\n.katex .fontsize-ensurer.reset-size8.size2 {\n  font-size: 0.41666667em;\n}\n.katex .sizing.reset-size8.size3,\n.katex .fontsize-ensurer.reset-size8.size3 {\n  font-size: 0.48611111em;\n}\n.katex .sizing.reset-size8.size4,\n.katex .fontsize-ensurer.reset-size8.size4 {\n  font-size: 0.55555556em;\n}\n.katex .sizing.reset-size8.size5,\n.katex .fontsize-ensurer.reset-size8.size5 {\n  font-size: 0.625em;\n}\n.katex .sizing.reset-size8.size6,\n.katex .fontsize-ensurer.reset-size8.size6 {\n  font-size: 0.69444444em;\n}\n.katex .sizing.reset-size8.size7,\n.katex .fontsize-ensurer.reset-size8.size7 {\n  font-size: 0.83333333em;\n}\n.katex .sizing.reset-size8.size8,\n.katex .fontsize-ensurer.reset-size8.size8 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size8.size9,\n.katex .fontsize-ensurer.reset-size8.size9 {\n  font-size: 1.2em;\n}\n.katex .sizing.reset-size8.size10,\n.katex .fontsize-ensurer.reset-size8.size10 {\n  font-size: 1.44027778em;\n}\n.katex .sizing.reset-size8.size11,\n.katex .fontsize-ensurer.reset-size8.size11 {\n  font-size: 1.72777778em;\n}\n.katex .sizing.reset-size9.size1,\n.katex .fontsize-ensurer.reset-size9.size1 {\n  font-size: 0.28935185em;\n}\n.katex .sizing.reset-size9.size2,\n.katex .fontsize-ensurer.reset-size9.size2 {\n  font-size: 0.34722222em;\n}\n.katex .sizing.reset-size9.size3,\n.katex .fontsize-ensurer.reset-size9.size3 {\n  font-size: 0.40509259em;\n}\n.katex .sizing.reset-size9.size4,\n.katex .fontsize-ensurer.reset-size9.size4 {\n  font-size: 0.46296296em;\n}\n.katex .sizing.reset-size9.size5,\n.katex .fontsize-ensurer.reset-size9.size5 {\n  font-size: 0.52083333em;\n}\n.katex .sizing.reset-size9.size6,\n.katex .fontsize-ensurer.reset-size9.size6 {\n  font-size: 0.5787037em;\n}\n.katex .sizing.reset-size9.size7,\n.katex .fontsize-ensurer.reset-size9.size7 {\n  font-size: 0.69444444em;\n}\n.katex .sizing.reset-size9.size8,\n.katex .fontsize-ensurer.reset-size9.size8 {\n  font-size: 0.83333333em;\n}\n.katex .sizing.reset-size9.size9,\n.katex .fontsize-ensurer.reset-size9.size9 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size9.size10,\n.katex .fontsize-ensurer.reset-size9.size10 {\n  font-size: 1.20023148em;\n}\n.katex .sizing.reset-size9.size11,\n.katex .fontsize-ensurer.reset-size9.size11 {\n  font-size: 1.43981481em;\n}\n.katex .sizing.reset-size10.size1,\n.katex .fontsize-ensurer.reset-size10.size1 {\n  font-size: 0.24108004em;\n}\n.katex .sizing.reset-size10.size2,\n.katex .fontsize-ensurer.reset-size10.size2 {\n  font-size: 0.28929605em;\n}\n.katex .sizing.reset-size10.size3,\n.katex .fontsize-ensurer.reset-size10.size3 {\n  font-size: 0.33751205em;\n}\n.katex .sizing.reset-size10.size4,\n.katex .fontsize-ensurer.reset-size10.size4 {\n  font-size: 0.38572806em;\n}\n.katex .sizing.reset-size10.size5,\n.katex .fontsize-ensurer.reset-size10.size5 {\n  font-size: 0.43394407em;\n}\n.katex .sizing.reset-size10.size6,\n.katex .fontsize-ensurer.reset-size10.size6 {\n  font-size: 0.48216008em;\n}\n.katex .sizing.reset-size10.size7,\n.katex .fontsize-ensurer.reset-size10.size7 {\n  font-size: 0.57859209em;\n}\n.katex .sizing.reset-size10.size8,\n.katex .fontsize-ensurer.reset-size10.size8 {\n  font-size: 0.69431051em;\n}\n.katex .sizing.reset-size10.size9,\n.katex .fontsize-ensurer.reset-size10.size9 {\n  font-size: 0.83317261em;\n}\n.katex .sizing.reset-size10.size10,\n.katex .fontsize-ensurer.reset-size10.size10 {\n  font-size: 1em;\n}\n.katex .sizing.reset-size10.size11,\n.katex .fontsize-ensurer.reset-size10.size11 {\n  font-size: 1.19961427em;\n}\n.katex .sizing.reset-size11.size1,\n.katex .fontsize-ensurer.reset-size11.size1 {\n  font-size: 0.20096463em;\n}\n.katex .sizing.reset-size11.size2,\n.katex .fontsize-ensurer.reset-size11.size2 {\n  font-size: 0.24115756em;\n}\n.katex .sizing.reset-size11.size3,\n.katex .fontsize-ensurer.reset-size11.size3 {\n  font-size: 0.28135048em;\n}\n.katex .sizing.reset-size11.size4,\n.katex .fontsize-ensurer.reset-size11.size4 {\n  font-size: 0.32154341em;\n}\n.katex .sizing.reset-size11.size5,\n.katex .fontsize-ensurer.reset-size11.size5 {\n  font-size: 0.36173633em;\n}\n.katex .sizing.reset-size11.size6,\n.katex .fontsize-ensurer.reset-size11.size6 {\n  font-size: 0.40192926em;\n}\n.katex .sizing.reset-size11.size7,\n.katex .fontsize-ensurer.reset-size11.size7 {\n  font-size: 0.48231511em;\n}\n.katex .sizing.reset-size11.size8,\n.katex .fontsize-ensurer.reset-size11.size8 {\n  font-size: 0.57877814em;\n}\n.katex .sizing.reset-size11.size9,\n.katex .fontsize-ensurer.reset-size11.size9 {\n  font-size: 0.69453376em;\n}\n.katex .sizing.reset-size11.size10,\n.katex .fontsize-ensurer.reset-size11.size10 {\n  font-size: 0.83360129em;\n}\n.katex .sizing.reset-size11.size11,\n.katex .fontsize-ensurer.reset-size11.size11 {\n  font-size: 1em;\n}\n.katex .delimsizing.size1 {\n  font-family: KaTeX_Size1;\n}\n.katex .delimsizing.size2 {\n  font-family: KaTeX_Size2;\n}\n.katex .delimsizing.size3 {\n  font-family: KaTeX_Size3;\n}\n.katex .delimsizing.size4 {\n  font-family: KaTeX_Size4;\n}\n.katex .delimsizing.mult .delim-size1 > span {\n  font-family: KaTeX_Size1;\n}\n.katex .delimsizing.mult .delim-size4 > span {\n  font-family: KaTeX_Size4;\n}\n.katex .nulldelimiter {\n  display: inline-block;\n  width: 0.12em;\n}\n.katex .delimcenter {\n  position: relative;\n}\n.katex .op-symbol {\n  position: relative;\n}\n.katex .op-symbol.small-op {\n  font-family: KaTeX_Size1;\n}\n.katex .op-symbol.large-op {\n  font-family: KaTeX_Size2;\n}\n.katex .op-limits > .vlist-t {\n  text-align: center;\n}\n.katex .accent > .vlist-t {\n  text-align: center;\n}\n.katex .accent .accent-body {\n  position: relative;\n}\n.katex .accent .accent-body:not(.accent-full) {\n  width: 0;\n}\n.katex .overlay {\n  display: block;\n}\n.katex .mtable .vertical-separator {\n  display: inline-block;\n  margin: 0 -0.025em;\n  border-right: 0.05em solid;\n  min-width: 1px;\n}\n.katex .mtable .vs-dashed {\n  border-right: 0.05em dashed;\n}\n.katex .mtable .arraycolsep {\n  display: inline-block;\n}\n.katex .mtable .col-align-c > .vlist-t {\n  text-align: center;\n}\n.katex .mtable .col-align-l > .vlist-t {\n  text-align: left;\n}\n.katex .mtable .col-align-r > .vlist-t {\n  text-align: right;\n}\n.katex .svg-align {\n  text-align: left;\n}\n.katex svg {\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: inherit;\n  fill: currentColor;\n  stroke: currentColor;\n  fill-rule: nonzero;\n  fill-opacity: 1;\n  stroke-width: 1;\n  stroke-linecap: butt;\n  stroke-linejoin: miter;\n  stroke-miterlimit: 4;\n  stroke-dasharray: none;\n  stroke-dashoffset: 0;\n  stroke-opacity: 1;\n}\n.katex svg path {\n  stroke: none;\n}\n.katex img {\n  border-style: none;\n  min-width: 0;\n  min-height: 0;\n  max-width: none;\n  max-height: none;\n}\n.katex .stretchy {\n  width: 100%;\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n.katex .stretchy::before,\n.katex .stretchy::after {\n  content: \"\";\n}\n.katex .hide-tail {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.katex .halfarrow-left {\n  position: absolute;\n  left: 0;\n  width: 50.2%;\n  overflow: hidden;\n}\n.katex .halfarrow-right {\n  position: absolute;\n  right: 0;\n  width: 50.2%;\n  overflow: hidden;\n}\n.katex .brace-left {\n  position: absolute;\n  left: 0;\n  width: 25.1%;\n  overflow: hidden;\n}\n.katex .brace-center {\n  position: absolute;\n  left: 25%;\n  width: 50%;\n  overflow: hidden;\n}\n.katex .brace-right {\n  position: absolute;\n  right: 0;\n  width: 25.1%;\n  overflow: hidden;\n}\n.katex .x-arrow-pad {\n  padding: 0 0.5em;\n}\n.katex .x-arrow,\n.katex .mover,\n.katex .munder {\n  text-align: center;\n}\n.katex .boxpad {\n  padding: 0 0.3em 0 0.3em;\n}\n.katex .fbox,\n.katex .fcolorbox {\n  box-sizing: border-box;\n  border: 0.04em solid;\n}\n.katex .cancel-pad {\n  padding: 0 0.2em 0 0.2em;\n}\n.katex .cancel-lap {\n  margin-left: -0.2em;\n  margin-right: -0.2em;\n}\n.katex .sout {\n  border-bottom-style: solid;\n  border-bottom-width: 0.08em;\n}\n.katex-display {\n  display: block;\n  margin: 1em 0;\n  text-align: center;\n}\n.katex-display > .katex {\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n}\n.katex-display > .katex > .katex-html {\n  display: block;\n  position: relative;\n}\n.katex-display > .katex > .katex-html > .tag {\n  position: absolute;\n  right: 0;\n}\n.katex-display.leqno > .katex > .katex-html > .tag {\n  left: 0;\n  right: auto;\n}\n.katex-display.fleqn > .katex {\n  text-align: left;\n}\n\n";
  styleInject(css_248z);

  var markdownConverter = new Showdown__default['default'].Converter({
    tables: true,
    simplifiedAutoLink: true,
    strikethrough: true,
    tasklists: true,
    // extensions: ['showdown_mathjax_ext'],
    extensions: [showdownKatex__default['default']({
      // maybe you want katex to throwOnError
      throwOnError: true,
      // disable displayMode
      displayMode: false
    })]
  });

  const conf$4 = window.REACT_COMMENTS_DJANGO_CONFIG;
  let DISPLAY_USERNAME_FIELD$3 = 'username';

  if (conf$4) {
    ({
      DISPLAY_USERNAME_FIELD: DISPLAY_USERNAME_FIELD$3
    } = conf$4);
  }

  class ReplyForm extends React__default['default'].Component {
    constructor(props) {
      super(props);

      TopicsListComponent._defineProperty(this, "handleTabChange", tab => {
        this.setState({
          mdeTab: tab
        });
      });

      this.state = {
        content: '',
        mdeTab: 'write'
      };
      this.handleChangeContent = this.handleChangeContent.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeContent(content) {
      this.setState({
        content
      });
    }

    handleSubmit(event) {
      event.preventDefault();
      this.props.onSubmitPost({
        content: this.state.content,
        parent: this.props.parentPost.uid
      });
      this.setState({
        content: ''
      });
    }

    render() {
      return /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 11
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "post-container bs-callout"
      }, this.props.parentPost.level === 0 ? /*#__PURE__*/React__default['default'].createElement("div", {
        className: ""
      }, /*#__PURE__*/React__default['default'].createElement("h6", {
        style: {
          display: 'inline'
        },
        className: ""
      }, "Comment as", ' '), this.props.currentProfile ? /*#__PURE__*/React__default['default'].createElement("h4", {
        className: "",
        style: {
          display: 'inline'
        }
      }, /*#__PURE__*/React__default['default'].createElement("a", {
        href: this.props.currentProfile.get_absolute_url,
        target: "blank"
      }, this.props.currentProfile[DISPLAY_USERNAME_FIELD$3])) : null) : /*#__PURE__*/React__default['default'].createElement("div", {
        className: ""
      }, /*#__PURE__*/React__default['default'].createElement("h6", {
        style: {
          display: 'inline'
        },
        className: ""
      }, "Reply to", ' '), /*#__PURE__*/React__default['default'].createElement("h4", {
        className: "",
        style: {
          display: 'inline'
        }
      }, this.props.parentPost.created_by ? /*#__PURE__*/React__default['default'].createElement("a", {
        href: this.props.parentPost.created_by.get_absolute_url,
        target: "blank"
      }, this.props.parentPost.created_by[DISPLAY_USERNAME_FIELD$3]) : 'Guest')), /*#__PURE__*/React__default['default'].createElement(ReactMde__default['default'], {
        onChange: this.handleChangeContent,
        value: this.state.content,
        selectedTab: this.state.mdeTab,
        onTabChange: this.handleTabChange,
        generateMarkdownPreview: markdown => Promise.resolve(markdownConverter.makeHtml(markdown))
      }), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("form", {
        method: "post",
        acceptCharset: "utf-8",
        onSubmit: this.handleSubmit
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, this.props.parentPost.level === 0 ? /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        disabled: this.state.content === '',
        type: "submit"
      }, "Comment") : /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        type: "submit",
        disabled: this.state.content === ''
      }, "Reply"), "\xA0", /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        type: "reset",
        onClick: this.props.onToggleForm
      }, "Cancel")))))));
    }

  }
  ReplyForm.propTypes = {
    parentPost: PropTypes__default['default'].object.isRequired,
    currentProfile: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    onSubmitPost: PropTypes__default['default'].func.isRequired,
    onToggleForm: PropTypes__default['default'].func
  };

  const conf$3 = window.REACT_COMMENTS_DJANGO_CONFIG;
  let DISPLAY_USERNAME_FIELD$2 = 'username';

  if (conf$3) {
    ({
      DISPLAY_USERNAME_FIELD: DISPLAY_USERNAME_FIELD$2
    } = conf$3);
  }

  class EditForm extends React__default['default'].Component {
    constructor(props) {
      super(props);

      TopicsListComponent._defineProperty(this, "handleTabChange", tab => {
        this.setState({
          mdeTab: tab
        });
      });

      this.state = {
        content: props.parentPost.content,
        mdeTab: 'write'
      };
      this.handleChangeContent = this.handleChangeContent.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeContent(content) {
      this.setState({
        content
      });
    }

    handleSubmit(event) {
      event.preventDefault();
      this.props.onSubmitPost({
        content: this.state.content,
        uid: this.props.parentPost.uid // parent: this.props.parentPost.uid

      }); // this.setState({ content: '' })
    } // componentWillReceiveProps(nextProps) {
    //   // refresh with reload
    //   this.setState({ content: nextProps.parentPost.content })
    // }


    render() {
      return /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 11
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "post-container bs-callout"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: ""
      }, /*#__PURE__*/React__default['default'].createElement("h6", {
        style: {
          display: 'inline'
        },
        className: ""
      }, "Comment as", ' '), this.props.currentProfile ? /*#__PURE__*/React__default['default'].createElement("h4", {
        className: "",
        style: {
          display: 'inline'
        }
      }, /*#__PURE__*/React__default['default'].createElement("a", {
        href: this.props.currentProfile.get_absolute_url,
        target: "blank"
      }, this.props.currentProfile[DISPLAY_USERNAME_FIELD$2])) : null), /*#__PURE__*/React__default['default'].createElement(ReactMde__default['default'], {
        onChange: this.handleChangeContent,
        value: this.state.content,
        selectedTab: this.state.mdeTab,
        onTabChange: this.handleTabChange,
        generateMarkdownPreview: markdown => Promise.resolve(markdownConverter.makeHtml(markdown))
      }), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("form", {
        method: "post",
        acceptCharset: "utf-8",
        onSubmit: this.handleSubmit
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, this.props.parentPost.level === 0 ? /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        disabled: this.state.content === '',
        type: "submit"
      }, "Comment") : /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        type: "submit",
        disabled: this.state.content === ''
      }, "Edit"), "\xA0", /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
        type: "reset",
        onClick: this.props.onToggleForm
      }, "Cancel")))))));
    }

  }
  EditForm.propTypes = {
    parentPost: PropTypes__default['default'].object.isRequired,
    currentProfile: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    onSubmitPost: PropTypes__default['default'].func.isRequired,
    onToggleForm: PropTypes__default['default'].func
  };

  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { TopicsListComponent._defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  const conf$2 = window.REACT_COMMENTS_DJANGO_CONFIG;
  let DISPLAY_USERNAME_FIELD$1 = 'username';

  if (conf$2) {
    ({
      DISPLAY_USERNAME_FIELD: DISPLAY_USERNAME_FIELD$1
    } = conf$2);
  } // TODO move MarkdownMathRender to utils


  const MarkdownMathRender$1 = props => {
    const newProps = _objectSpread$1(_objectSpread$1({}, props), {}, {
      plugins: [RemarkMathPlugin__default['default']],
      renderers: _objectSpread$1(_objectSpread$1({}, props.renderers), {}, {
        math: _props => /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Node, null, _props.value),
        inlineMath: _props => /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Node, {
          inline: true
        }, _props.value)
      })
    });

    return /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Context, {
      input: "tex"
    }, /*#__PURE__*/React__default['default'].createElement(ReactMarkdown__default['default'], newProps));
  }; // TODO rewrite with react functional component
  // TODO extract buttons and voting to the new component


  class Post extends React__default['default'].Component {
    constructor(props) {
      super(props);
      this.state = {
        replyFormShow: false,
        editFormShow: false,
        content: this.props.post.content
      };
      this.onSubmitReplay = this.onSubmitReplay.bind(this);
      this.onSubmitEdit = this.onSubmitEdit.bind(this);
      this.toggleReplyForm = this.toggleReplyForm.bind(this);
      this.toggleEditForm = this.toggleEditForm.bind(this);
      this.onVoteClick = this.onVoteClick.bind(this);
      this.editComment = this.editComment.bind(this);
      this.restoreComment = this.restoreComment.bind(this);
      this.deleteComment = this.deleteComment.bind(this);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
      if (this.props.post && this.props.post.content !== prevProps.post.content) {
        this.setState({
          content: this.props.post.content
        });
      }
    }

    onSubmitReplay(...args) {
      this.props.onSubmitReplay(...args);
      this.toggleReplyForm();
    }

    onSubmitEdit(...args) {
      this.props.onSubmitEdit(...args);
      this.toggleEditForm();
    }

    restoreComment() {
      const post = {
        uid: this.props.post.uid,
        deleted_on: null
      };
      this.props.onSubmitEdit(post);
    }

    toggleReplyForm() {
      this.setState({
        replyFormShow: !this.state.replyFormShow
      });
    }

    toggleEditForm() {
      this.setState({
        editFormShow: !this.state.editFormShow
      });
    }

    deleteComment() {
      // delete comment reload thread
      if (confirm('Are you sure you want to delete this comment?')) {
        // TODO we can use Modal from react bootstrap if needed
        this.props.onDelete(this.props.post);
      }
    }

    editComment() {
      this.setState({
        editFormShow: !this.state.editFormShow
      });
    }

    onVoteClick(value) {
      this.props.changePostVote(this.props.post, value);
    }

    render() {
      return /*#__PURE__*/React__default['default'].createElement("div", null, this.props.post ? /*#__PURE__*/React__default['default'].createElement(Container__default['default'], {
        fluid: true,
        style: {
          padding: 0
        }
      }, /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 11,
        md: 11
      }, /*#__PURE__*/React__default['default'].createElement(Row__default['default'], {
        className: "gray-text"
      }, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 1,
        sm: 2,
        xs: 4
      }, this.props.post.created_by ? /*#__PURE__*/React__default['default'].createElement("a", {
        href: this.props.post.created_by.get_absolute_url,
        target: "_blank"
      }, this.props.post.created_by[DISPLAY_USERNAME_FIELD$1]) : 'Guest'), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 2,
        sm: 3,
        xs: 4
      }, /*#__PURE__*/React__default['default'].createElement(Moment__default['default'], {
        fromNow: true
      }, this.props.post.created_on)), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 2,
        sm: 3,
        xs: 4
      }, this.props.post.modified_on ? /*#__PURE__*/React__default['default'].createElement("span", null, "edited", ' ', /*#__PURE__*/React__default['default'].createElement(Moment__default['default'], {
        fromNow: true
      }, this.props.post.modified_on)) : null)), /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 12,
        md: 12
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "postcol"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "post-content"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          display: this.state.editFormShow ? 'block' : 'none'
        }
      }, /*#__PURE__*/React__default['default'].createElement(EditForm, {
        parentPost: this.props.post,
        currentProfile: this.props.currentProfile,
        onSubmitPost: args => {
          this.setState({
            content: args.content
          });
          this.onSubmitEdit(args);
        },
        onToggleForm: this.toggleEditForm
      })), this.state.editFormShow ? null : /*#__PURE__*/React__default['default'].createElement("div", {
        className: "mde-preview"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "mde-preview-content"
      }, /*#__PURE__*/React__default['default'].createElement(MarkdownMathRender$1, {
        source: this.state.content
      })))), /*#__PURE__*/React__default['default'].createElement("div", {
        className: "djeddit-post-item-footer"
      }, !this.props.post.deleted_on && /*#__PURE__*/React__default['default'].createElement("div", {
        className: "djeddit-score"
      }, /*#__PURE__*/React__default['default'].createElement(fa.FaArrowUp, {
        onClick: () => this.onVoteClick(1),
        style: {
          cursor: 'pointer',
          margin: '0 .5rem',
          color: this.props.post.user_vote === 1 && 'blue'
        }
      }), /*#__PURE__*/React__default['default'].createElement("span", {
        className: " djeddit-score-number"
      }, this.props.post.score), /*#__PURE__*/React__default['default'].createElement(fa.FaArrowDown, {
        onClick: () => this.onVoteClick(-1),
        style: {
          cursor: 'pointer',
          margin: '0 .5rem',
          color: this.props.post.user_vote === -1 && 'blue'
        }
      })), this.props.currentProfile && !this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, this.props.post.user_can_edit && /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.toggleEditForm,
        className: "btn btn-secondary"
      }, "Edit"), !this.props.post.deleted_on && /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.toggleReplyForm,
        className: "btn btn-secondary"
      }, "Reply"), this.props.post.user_can_delete && /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.deleteComment,
        className: "btn btn-secondary"
      }, "Delete")) : null, this.props.currentProfile && this.props.currentProfile.is_staff && this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.restoreComment,
        className: "btn btn-secondary"
      }, "Restore")) : null, !this.props.currentProfile && !this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("span", null, "Please register or login to post a comment") : null)))), /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 12,
        md: 12
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }))), /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          display: this.state.replyFormShow ? 'block' : 'none'
        }
      }, /*#__PURE__*/React__default['default'].createElement(ReplyForm, {
        parentPost: this.props.post,
        currentProfile: this.props.currentProfile,
        onSubmitPost: this.onSubmitReplay,
        onToggleForm: this.toggleReplyForm
      }))))) : null);
    }

  }
  Post.propTypes = {
    post: PropTypes__default['default'].object.isRequired,
    onSubmitReplay: PropTypes__default['default'].func.isRequired,
    onSubmitEdit: PropTypes__default['default'].func.isRequired,
    currentProfile: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    changePostVote: PropTypes__default['default'].func.isRequired,
    onDelete: PropTypes__default['default'].func.isRequired
  };

  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { TopicsListComponent._defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  const conf$1 = window.REACT_COMMENTS_DJANGO_CONFIG;
  let DISPLAY_USERNAME_FIELD = 'username';

  if (conf$1) {
    ({
      DISPLAY_USERNAME_FIELD
    } = conf$1);
  } // TODO move MarkdownMathRender to utils


  const MarkdownMathRender = props => {
    const newProps = _objectSpread(_objectSpread({}, props), {}, {
      plugins: [RemarkMathPlugin__default['default']],
      renderers: _objectSpread(_objectSpread({}, props.renderers), {}, {
        math: _props => /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Node, null, _props.value),
        inlineMath: _props => /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Node, {
          inline: true
        }, _props.value)
      })
    });

    return /*#__PURE__*/React__default['default'].createElement(MathJax__default['default'].Context, {
      input: "tex"
    }, /*#__PURE__*/React__default['default'].createElement(ReactMarkdown__default['default'], newProps));
  }; // TODO rewrite with react functional component
  // TODO extract buttons and voting to the new component


  class RootPost extends React__default['default'].Component {
    constructor(props) {
      super(props);
      this.state = {
        replyFormShow: false,
        editFormShow: false,
        content: this.props.post.content
      };
      this.onSubmitReplay = this.onSubmitReplay.bind(this);
      this.onSubmitEdit = this.onSubmitEdit.bind(this);
      this.toggleReplyForm = this.toggleReplyForm.bind(this);
      this.toggleEditForm = this.toggleEditForm.bind(this);
      this.onVoteClick = this.onVoteClick.bind(this);
      this.editComment = this.editComment.bind(this);
      this.deleteComment = this.deleteComment.bind(this);
      this.restoreComment = this.restoreComment.bind(this);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
      if (this.props.post && this.props.post.content !== prevProps.post.content) {
        this.setState({
          content: this.props.post.content
        });
      }
    }

    onSubmitReplay(...args) {
      this.props.onSubmitReplay(...args);
      this.toggleReplyForm();
    }

    onSubmitEdit(...args) {
      this.props.onSubmitEdit(...args);
      this.toggleEditForm();
    }

    restoreComment() {
      const post = {
        uid: this.props.post.uid,
        deleted_on: null
      };
      this.props.onSubmitEdit(post);
    }

    toggleReplyForm() {
      this.setState({
        replyFormShow: !this.state.replyFormShow
      });
    }

    toggleEditForm() {
      this.setState({
        editFormShow: !this.state.editFormShow
      });
    }

    deleteComment() {
      // delete comment reload thread
      if (confirm('Are you sure you want to delete this comment?')) {
        // TODO we can use Modal from react bootstrap if needed
        this.props.onDelete(this.props.post);
      }
    }

    editComment() {
      this.setState({
        editFormShow: !this.state.editFormShow
      });
    }

    onVoteClick(value) {
      this.props.changePostVote(this.props.post, value);
    }

    render() {
      return /*#__PURE__*/React__default['default'].createElement("div", null, this.props.post && (!this.props.showReplyFormOnly ? /*#__PURE__*/React__default['default'].createElement(Container__default['default'], {
        fluid: true,
        style: {
          padding: 0
        }
      }, /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 11,
        md: 11
      }, /*#__PURE__*/React__default['default'].createElement(Row__default['default'], {
        className: "gray-text"
      }, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 1,
        sm: 2,
        xs: 4
      }, this.props.post.created_by ? /*#__PURE__*/React__default['default'].createElement("a", {
        href: this.props.post.created_by.get_absolute_url,
        target: "_blank"
      }, this.props.post.created_by[DISPLAY_USERNAME_FIELD]) : 'Guest'), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 2,
        sm: 3,
        xs: 4
      }, /*#__PURE__*/React__default['default'].createElement(Moment__default['default'], {
        fromNow: true
      }, this.props.post.created_on)), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        md: 2,
        sm: 3,
        xs: 4
      }, this.props.post.modified_on ? /*#__PURE__*/React__default['default'].createElement("span", null, "edited", ' ', /*#__PURE__*/React__default['default'].createElement(Moment__default['default'], {
        fromNow: true
      }, this.props.post.modified_on)) : null)), /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 12,
        md: 12
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "postcol"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "post-content"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          display: this.state.editFormShow ? 'block' : 'none'
        }
      }, /*#__PURE__*/React__default['default'].createElement(EditForm, {
        parentPost: this.props.post,
        currentProfile: this.props.currentProfile,
        onSubmitPost: args => {
          this.setState({
            content: args.content
          });
          this.onSubmitEdit(args);
        },
        onToggleForm: this.toggleEditForm
      })), this.state.editFormShow ? null : /*#__PURE__*/React__default['default'].createElement("div", {
        className: "mde-preview"
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "mde-preview-content"
      }, /*#__PURE__*/React__default['default'].createElement(MarkdownMathRender, {
        source: this.state.content
      })))), /*#__PURE__*/React__default['default'].createElement("div", {
        className: "djeddit-post-item-footer"
      }, !this.props.post.deleted_on && /*#__PURE__*/React__default['default'].createElement("div", {
        className: "djeddit-score"
      }, /*#__PURE__*/React__default['default'].createElement(fa.FaArrowUp, {
        onClick: () => this.onVoteClick(1),
        style: {
          cursor: 'pointer',
          margin: '0 .5rem',
          color: this.props.post.user_vote === 1 && 'blue'
        }
      }), /*#__PURE__*/React__default['default'].createElement("span", {
        className: " djeddit-score-number"
      }, this.props.post.score), /*#__PURE__*/React__default['default'].createElement(fa.FaArrowDown, {
        onClick: () => this.onVoteClick(-1),
        style: {
          cursor: 'pointer',
          margin: '0 .5rem',
          color: this.props.post.user_vote === -1 && 'blue'
        }
      })), this.props.currentProfile && !this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, this.props.post.user_can_edit && /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.toggleEditForm,
        className: "btn btn-secondary"
      }, "Edit"), /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.toggleReplyForm,
        className: "btn btn-secondary"
      }, "Reply"), this.props.post.user_can_delete && !this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.deleteComment,
        className: "btn btn-secondary"
      }, "Delete") : null) : null, this.props.currentProfile && this.props.currentProfile.is_staff && this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }, /*#__PURE__*/React__default['default'].createElement("button", {
        onClick: this.restoreComment,
        className: "btn btn-secondary"
      }, "Restore")) : null, !this.props.currentProfile && !this.props.post.deleted_on ? /*#__PURE__*/React__default['default'].createElement("span", null, "Please register or login to post a comment") : null)))), /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
        sm: 12,
        md: 12
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        className: "btn-group btn-group-xs",
        role: "group"
      }))), /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          display: this.state.replyFormShow ? 'block' : 'none'
        }
      }, /*#__PURE__*/React__default['default'].createElement(ReplyForm, {
        parentPost: this.props.post,
        currentProfile: this.props.currentProfile,
        onSubmitPost: this.onSubmitReplay,
        onToggleForm: this.toggleReplyForm
      }))))) : this.props.currentProfile &&
      /*#__PURE__*/
      // show only for logged in user
      React__default['default'].createElement(ReplyForm, {
        parentPost: this.props.post,
        currentProfile: this.props.currentProfile,
        onSubmitPost: this.onSubmitReplay,
        onToggleForm: this.toggleReplyForm
      })));
    }

  }
  RootPost.propTypes = {
    post: PropTypes__default['default'].object.isRequired,
    onSubmitReplay: PropTypes__default['default'].func.isRequired,
    onSubmitEdit: PropTypes__default['default'].func.isRequired,
    currentProfile: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    changePostVote: PropTypes__default['default'].func.isRequired,
    onDelete: PropTypes__default['default'].func.isRequired,
    showReplyFormOnly: PropTypes__default['default'].bool
  };

  const conf = window.REACT_COMMENTS_DJANGO_CONFIG;
  let ANON_AS_USER_OBJECT = false;

  if (conf) {
    ({
      ANON_AS_USER_OBJECT
    } = conf);
  }

  const settings = {
    anonAsUserObject: ANON_AS_USER_OBJECT
  };

  /*
   * ThreadPage
   *
   * This is the first thing users see of our App, at the '/' route
   */
  // import history from '../../utils/history'

  const threadKey = 'thread';
  const topicsKey = 'topics';
  const appKey = 'app'; // const MarkdownMathRender = props => {
  //   const newProps = {
  //     ...props,
  //     plugins: [RemarkMathPlugin],
  //     renderers: {
  //       ...props.renderers,
  //       math: _props => <MathJax.Node>{_props.value}</MathJax.Node>,
  //       inlineMath: _props => <MathJax.Node inline>{_props.value}</MathJax.Node>,
  //     },
  //   }
  //
  //   return (
  //     <MathJax.Context input="tex">
  //       <ReactMarkdown {...newProps} />
  //     </MathJax.Context>
  //   )
  // }

  function ThreadPage({
    threadActions,
    topicsActions,
    appActions,
    match,
    postsList,
    // post list from server
    newPost,
    updatedPost,
    deletedPost,
    thread,
    topic,
    signedInUser,
    threadId,
    anonAsUserObject = settings.anonAsUserObject,
    history: _history
  }) {
    index$1.useInjectReducer({
      key: threadKey,
      reducer: threadReducer
    });
    request.useInjectSaga({
      key: threadKey,
      saga: threadData
    });
    index$1.useInjectReducer({
      key: topicsKey,
      reducer: saga.topicsListReducer
    });
    request.useInjectSaga({
      key: topicsKey,
      saga: saga.topicsData
    });
    request.useInjectSaga({
      key: appKey,
      saga: appData
    });
    index$1.useInjectReducer({
      key: appKey,
      reducer: TopicsListComponent.appReducer
    });
    const [posts, setPosts] = React.useState([]); // posts list loaded in a client side

    const [hasMoreItems, setHasMoreItems] = React.useState(false);
    const [nextHref, setNextHref] = React.useState(null);
    const [breadcrumbSections, setBreadcrumbSections] = React.useState([]);
    const parentUrlPrefix = match.path.split('/:topicSlug')[0];
    React.useEffect(() => {
      if (topic) {
        // TODO generate this
        let baseName = '';

        if (_history) {
          baseName = _history.createHref({
            pathname: ''
          }).slice(0, -1);
        }

        setBreadcrumbSections([{
          key: 'Topics',
          content: 'Topics',
          href: `${baseName}${parentUrlPrefix}/topics`,
          // link: true,
          onClick: evt => {
            evt.preventDefault(); // inside history do not know about external history basename, so add this

            TopicsListComponent.history.push(`${baseName}${parentUrlPrefix}/topics`);

            if (_history) {
              // parent app history
              _history.push({
                pathname: `${parentUrlPrefix}/topics`
              });
            }
          }
        }, {
          key: topic.slug,
          content: topic.title,
          href: `${baseName}${parentUrlPrefix}/topics/${topic.slug}`,
          // link: true,
          onClick: evt => {
            evt.preventDefault();
            TopicsListComponent.history.push(`${baseName}${parentUrlPrefix}/topics/${topic.slug}`);

            if (_history) {
              // parent app history
              _history.push({
                pathname: `${parentUrlPrefix}/topics/${topic.slug}`
              });
            }
          }
        }]);
      }
    }, [topic]); // post was updated from server

    React.useEffect(() => {
      if (updatedPost) {
        setPosts(posts.map(item => {
          if (updatedPost.uid === item.uid) {
            return updatedPost;
          }

          return item;
        }));
      }
    }, [updatedPost]);
    React.useEffect(() => {
      if (!signedInUser) {
        appActions.loadSignedInUser();
      }
    }, []);
    React.useEffect(() => {
      // loaded as Component / threadId changed
      if (threadId) {
        threadActions.loadPosts(threadId);
      }

      return () => {
        // clear topics list berfore threadId
        clearThread();
      };
    }, [threadId]);

    const clearThread = () => {
      setHasMoreItems(false);
      setPosts([]);
      threadActions.postsLoaded(false);
      threadActions.newPostSuccess(null);
    };

    React.useEffect(() => {
      if (match) {
        // loaded as SPA
        if (!topic) {
          topicsActions.loadTopic(match.params.topicSlug);
        } // load thread from server


        threadActions.loadThread(match.params.threadId); // load posts of thread from server

        threadActions.loadPosts(match.params.threadId);
      } // reset on unmount


      return () => {
        clearThread();
      };
    }, []);
    React.useEffect(() => {
      function mergeUnique(a, b, prop) {
        const reduced = a.filter(aItem => !b.find(bItem => aItem[prop] === bItem[prop]));
        return reduced.concat(b);
      }

      if (postsList) {
        // remove existing comments
        setPosts(mergeUnique(posts, postsList.results, 'uid') // [...posts, ...postsList.results]
        );
        setHasMoreItems(Boolean(postsList.next));
        setNextHref(postsList.next);
      }
    }, [postsList]);
    React.useEffect(() => {
      // find parent in posts and append
      if (newPost) {
        // find last index with
        const parentIndex = posts.findIndex(x => x.uid === newPost.parent);
        const postsCopy = [...posts];
        postsCopy.splice(parentIndex + 1, 0, newPost);
        setPosts(postsCopy);
      }
    }, [newPost]);
    React.useEffect(() => {
      if (deletedPost) {
        // setPosts(posts.filter(item => deletedPost.uid !== item.uid)) //  remove deleted post
        setPosts(posts.map(item => {
          if (deletedPost.uid === item.uid) {
            return deletedPost; // const deletedPostCopy = Object.assign({}, item)
            // deletedPostCopy.content = '\\[deleted\\]'
            // deletedPostCopy.created_by.id = 0
            // deletedPostCopy.created_by.username = '[deleted]'
            // return deletedPostCopy
          }

          return item;
        }));
      }
    }, [deletedPost]);

    const handleAddSubmit = args => {
      threadActions.newPost(args);
    };

    const handleUpdateSubmit = args => {
      threadActions.updatePost(args);
    };

    const handleDeleteSubmit = args => {
      threadActions.deletePost(args);
    };

    const handleVote = (...args) => {
      threadActions.votePost(...args);
    }; // it is better to use this func as checkUserAuth (in post/root post) fixme


    const getCurrentUser = () => {
      if (!signedInUser) {
        return null;
      }

      if ( // if user loads as object with {is_anonymous: true} attr
      signedInUser && anonAsUserObject && Object.prototype.hasOwnProperty.call(signedInUser, 'is_anonymous') && signedInUser.is_anonymous) {
        return null;
      }

      return signedInUser;
    }; // let comments = []


    let rootComment = null;

    if (posts.length > 0) {
      rootComment = /*#__PURE__*/React__default['default'].createElement(RootPost, {
        post: posts[0],
        onSubmitReplay: handleAddSubmit,
        onSubmitEdit: handleUpdateSubmit,
        currentProfile: getCurrentUser(),
        changePostVote: (...args) => {
          handleVote(...args);
        },
        onDelete: handleDeleteSubmit,
        showReplyFormOnly: Boolean(threadId)
      });
    }

    const renderPost = (post, onSubmitReplay, onSubmitEdit, onSubmitDelete) => {
      const widthRem = `${post.level}rem`;

      if (post.level === 0) {
        return null;
      }

      return /*#__PURE__*/React__default['default'].createElement("div", {
        key: post.uid,
        style: {
          paddingLeft: widthRem
        }
      }, /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          width: widthRem,
          display: 'inline-block',
          height: '100%',
          boxSizing: 'border-box'
        }
      }), /*#__PURE__*/React__default['default'].createElement("div", {
        style: {
          position: 'relative'
        }
      }, /*#__PURE__*/React__default['default'].createElement(Post, {
        post: post,
        onSubmitReplay: onSubmitReplay,
        onSubmitEdit: onSubmitEdit,
        currentProfile: getCurrentUser(),
        changePostVote: (...args) => {
          handleVote(...args);
        },
        onDelete: onSubmitDelete
      })));
    }; // load next page comments


    const loadNextPage = () => {
      if (hasMoreItems) {
        // if we call next page setHasMore item false and waiting for a server response
        setHasMoreItems(Boolean(false));
        threadActions.loadPosts(threadId || match.params.threadId, nextHref);
      }
    }; // all pages comments / todo check for performance


    const comments = posts.filter(function (item) {
      if (item.level === 0) {
        return false;
      }

      return true;
    }).map(item => renderPost(item, handleAddSubmit, handleUpdateSubmit, handleDeleteSubmit));
    return /*#__PURE__*/React__default['default'].createElement("article", null, !threadId && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default['default'].createElement("title", null, "Thread"), /*#__PURE__*/React__default['default'].createElement("meta", {
      name: "description",
      content: "React comments Django React thread"
    })), /*#__PURE__*/React__default['default'].createElement(index$2.Breadcrumb, {
      sections: breadcrumbSections
    })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(CenteredSection, null, /*#__PURE__*/React__default['default'].createElement(index$1.H2, null, thread && thread.title)), rootComment, /*#__PURE__*/React__default['default'].createElement(Section, null, /*#__PURE__*/React__default['default'].createElement(InfiniteScroll__default['default'], {
      pageStart: 0,
      loadMore: loadNextPage,
      hasMore: hasMoreItems // loader={<div key={this.state.nextHref} style={{clear: 'both'}} />} // fix https://github.com/CassetteRocks/react-infinite-scroller/issues/14#issuecomment-225835845

    }, comments, postsList && postsList.count === 0 && /*#__PURE__*/React__default['default'].createElement("h4", null, "There are no comments to show")))));
  }
  ThreadPage.propTypes = {
    threadActions: PropTypes__default['default'].shape({
      loadThread: PropTypes__default['default'].func.isRequired,
      loadPosts: PropTypes__default['default'].func.isRequired,
      postsLoaded: PropTypes__default['default'].func.isRequired,
      updatePost: PropTypes__default['default'].func.isRequired,
      deletePost: PropTypes__default['default'].func.isRequired,
      newPost: PropTypes__default['default'].func.isRequired,
      votePost: PropTypes__default['default'].func.isRequired
    }).isRequired,
    appActions: PropTypes__default['default'].shape({
      loadSignedInUser: PropTypes__default['default'].func.isRequired
    }).isRequired,
    topicsActions: PropTypes__default['default'].shape({
      loadTopic: PropTypes__default['default'].func.isRequired
    }).isRequired,
    match: PropTypes__default['default'].object,
    thread: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    postsList: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    topic: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    newPost: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    updatedPost: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    deletedPost: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    signedInUser: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    threadId: PropTypes__default['default'].number,
    anonAsUserObject: PropTypes__default['default'].bool
  };
  const mapStateToProps = reselect.createStructuredSelector({
    postsList: makeSelectPosts(),
    topic: saga.makeSelectTopic(),
    thread: makeSelectThread(),
    newPost: makeSelectNewPost(),
    updatedPost: makeSelectUpdatedPost(),
    deletedPost: makeSelectDeletedPost(),
    signedInUser: selectors.makeSelectSignedInUser() // loading: makeSelectLoading(),
    // error: makeSelectError(),

  });
  function mapDispatchToProps(dispatch) {
    return {
      threadActions: redux.bindActionCreators(threadActionsCreator, dispatch),
      topicsActions: redux.bindActionCreators(saga.loadTopicsActionsCreator, dispatch),
      appActions: redux.bindActionCreators(appActionsCreator, dispatch)
    };
  }
  const withConnect = reactRedux.connect(mapStateToProps, mapDispatchToProps);
  var index = redux.compose(withConnect, React.memo)(ThreadPage);

  exports.ThreadPage = ThreadPage;
  exports.default = index;
  exports.mapDispatchToProps = mapDispatchToProps;

});
//# sourceMappingURL=index-ab06c512.js.map
