privatebin-mirror/js/privatebin.js

'use strict';
/**
 * PrivateBin
 *
 * a zero-knowledge paste bin
 *
 * @see       {@link https://github.com/PrivateBin/PrivateBin}
 * @copyright 2012 Sébastien SAUVAGE ({@link http://sebsauvage.net})
 * @license   {@link https://www.opensource.org/licenses/zlib-license.php The zlib/libpng License}
 * @name      PrivateBin
 * @namespace
 */

/**
 * draghover plugin replacement
 * adds draghoverstart and draghoverend events to an element
 */
function draghover(element) {
    let collection = new Set();

    element.addEventListener('dragenter', function (e) {
        if (collection.size === 0) {
            element.dispatchEvent(new CustomEvent('draghoverstart'));
        }
        collection.add(e.target);
    });

    element.addEventListener('dragleave', function (e) {
        collection.delete(e.target);
        if (collection.size === 0) {
            element.dispatchEvent(new CustomEvent('draghoverend'));
        }
    });

    element.addEventListener('drop', function (e) {
        collection.delete(e.target);
        if (collection.size === 0) {
            element.dispatchEvent(new CustomEvent('draghoverend'));
        }
    });
}

window.PrivateBin = (function () {

    /**
     * zlib library interface
     *
     * @private
     */
    let z;

    /**
     * DOMpurify settings for HTML content
     *
     * @private
     */
    const purifyHtmlConfig = {
        ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|magnet):)/i,
        ALLOWED_ATTR: ['href'],
        USE_PROFILES: {
            html: true
        }
    };

    /**
     * DOMpurify settings for HTML content, where only a strict subset is allowed.
     *
     * NOTE: The key {@link purifyHtmlConfig.USE_PROFILES} **must not** be included,
     * as otherwise `USE_PROFILES` takes precedence over {@link purifyHtmlConfigStrictSubset.ALLOWED_TAGS}.
     *
     * @private
     */
    const purifyHtmlConfigStrictSubset = {
        ALLOWED_URI_REGEXP: purifyHtmlConfig.ALLOWED_URI_REGEXP,
        ALLOWED_TAGS: ['a'],
        ALLOWED_ATTR: ['href']
    };

    /**
     * DOMpurify settings for SVG content
     *
     * @private
     */
    const purifySvgConfig = {
        USE_PROFILES: {
            svg: true,
            svgFilters: true
        }
    };

    /**
     * DOMpurify settings for translated messages, which are allowed to include limited HTML.
     *
     * NOTE: The key {@link purifyHtmlConfig.USE_PROFILES} **must not** be included,
     * as otherwise `USE_PROFILES` takes precedence over {@link purifyHtmlConfigStrictSubset.ALLOWED_TAGS}.
     *
     * @private
     */
    const purifyTranslationConfig = {
        ALLOWED_URI_REGEXP: /^(?:https?:)/i, // the only URL expected here is the generated document, so only http & https
        ALLOWED_TAGS: ['a', 'i', 'span', 'kbd'],
        ALLOWED_ATTR: ['href', 'id'] // one of the messages contains an id attribute
    };

    /**
     * URL fragment prefix requiring load confirmation
     *
     * @private
     */
    const loadConfirmPrefix = '#-';

    /**
     * CryptoData class
     *
     * bundles helper functions used in both document and comment formats
     *
     * @name CryptoData
     * @class
     */
    function CryptoData(data) {
        // store all keys in the default locations for drop-in replacement
        for (const key in data) {
            if (Object.prototype.hasOwnProperty.call(data, key)) {
                this[key] = data[key];
            }
        }

        /**
         * gets the cipher data (cipher text + adata)
         *
         * @name CryptoData.getCipherData
         * @function
         * @return {Array}
         */
        this.getCipherData = function () {
            return [this.ct, this.adata];
        };
    }

    /**
     * Paste class
     *
     * bundles helper functions around the document formats
     *
     * @name Paste
     * @class
     */
    function Paste(data) {
        // inherit constructor and methods of CryptoData
        CryptoData.call(this, data);

        /**
         * gets the used formatter
         *
         * @name Paste.getFormat
         * @function
         * @return {string}
         */
        this.getFormat = function () {
            return this.adata[1];
        };

        /**
         * gets the remaining seconds before the document expires
         *
         * returns 0 if there is no expiration
         *
         * @name Paste.getTimeToLive
         * @function
         * @return {string}
         */
        this.getTimeToLive = function () {
            return this.meta.time_to_live || 0;
        };

        /**
         * is burn-after-reading enabled
         *
         * @name Paste.isBurnAfterReadingEnabled
         * @function
         * @return {bool}
         */
        this.isBurnAfterReadingEnabled = function () {
            return this.adata[3];
        };

        /**
         * are discussions enabled
         *
         * @name Paste.isDiscussionEnabled
         * @function
         * @return {bool}
         */
        this.isDiscussionEnabled = function () {
            return this.adata[2];
        };
    }

    /**
     * Comment class
     *
     * bundles helper functions around the comment formats
     *
     * @name Comment
     * @class
     */
    function Comment(data) {
        // inherit constructor and methods of CryptoData
        CryptoData.call(this, data);

        /**
         * gets the UNIX timestamp of the comment creation
         *
         * @name Comment.getCreated
         * @function
         * @return {int}
         */
        this.getCreated = function () {
            return this.meta.created || 0;
        };

        /**
         * gets the icon of the comment submitter
         *
         * @name Comment.getIcon
         * @function
         * @return {string}
         */
        this.getIcon = function () {
            return this.meta.icon || '';
        };
    }

    /**
     * static Helper methods
     *
     * @name Helper
     * @class
     */
    const Helper = (function () {
        const me = {};

        /**
         * character to HTML entity lookup table
         *
         * @see    {@link https://github.com/janl/mustache.js/blob/master/mustache.js#L60}
         * @name Helper.entityMap
         * @private
         * @enum   {Object}
         * @readonly
         */
        const entityMap = {
            '&': '&',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            '\'': '&#39;',
            '/': '&#x2F;',
            '`': '&#x60;',
            '=': '&#x3D;'
        };

        /**
         * number of seconds in a minute
         *
         * @name Helper.minute
         * @private
         * @enum   {number}
         * @readonly
         */
        const minute = 60;

        /**
         * number of seconds in an hour
         *
         * = 60 * 60 seconds
         *
         * @name Helper.minute
         * @private
         * @enum   {number}
         * @readonly
         */
        const hour = 3600;

        /**
         * number of seconds in a day
         *
         * = 60 * 60 * 24 seconds
         *
         * @name Helper.day
         * @private
         * @enum   {number}
         * @readonly
         */
        const day = 86400;

        /**
         * number of seconds in a week
         *
         * = 60 * 60 * 24 * 7 seconds
         *
         * @name Helper.week
         * @private
         * @enum   {number}
         * @readonly
         */
        const week = 604800;

        /**
         * number of seconds in a month (30 days, an approximation)
         *
         * = 60 * 60 * 24 * 30 seconds
         *
         * @name Helper.month
         * @private
         * @enum   {number}
         * @readonly
         */
        const month = 2592000;

        /**
         * number of seconds in a non-leap year
         *
         * = 60 * 60 * 24 * 365 seconds
         *
         * @name Helper.year
         * @private
         * @enum   {number}
         * @readonly
         */
        const year = 31536000;

        /**
         * cache for script location
         *
         * @name Helper.baseUri
         * @private
         * @enum   {string|null}
         */
        let baseUri = null;

        /**
         * converts a duration (in seconds) into human friendly approximation
         *
         * @name Helper.secondsToHuman
         * @function
         * @param  {number} seconds
         * @return {Array}
         */
        me.secondsToHuman = function (seconds) {
            let v;
            if (seconds < minute) {
                v = Math.floor(seconds);
                return [v, 'second'];
            }
            if (seconds < hour) {
                v = Math.floor(seconds / minute);
                return [v, 'minute'];
            }
            if (seconds < day) {
                v = Math.floor(seconds / hour);
                return [v, 'hour'];
            }
            // If less than 2 months, display in days:
            if (seconds <= (2 * month)) {
                v = Math.floor(seconds / day);
                return [v, 'day'];
            }
            v = Math.floor(seconds / month);
            return [v, 'month'];
        };

        /**
         * converts a duration string into seconds
         *
         * The string is expected to be optional digits, followed by a time.
         * Supported times are: min, hour, day, month, year, never
         * Examples: 5min, 13hour, never
         *
         * @name Helper.durationToSeconds
         * @function
         * @param  {String} duration
         * @return {number}
         */
        me.durationToSeconds = function (duration) {
            let pieces = duration.split(/(\D+)/),
                factor = pieces[0] || 0,
                timespan = pieces[1] || pieces[0];
            switch (timespan) {
                case 'min':
                    return factor * minute;
                case 'hour':
                    return factor * hour;
                case 'day':
                    return factor * day;
                case 'week':
                    return factor * week;
                case 'month':
                    return factor * month;
                case 'year':
                    return factor * year;
                case 'never':
                    return 0;
                default:
                    return factor;
            }
        };

        /**
         * text range selection
         *
         * @name   Helper.selectText
         * @function
         * @param  {HTMLElement} element
         */
        me.selectText = function (element) {
            let range, selection;

            if (window.getSelection) {
                selection = window.getSelection();
                if (!selection) {
                    console.warn('window.getSelection() returned null, could not get any select text');
                    return;
                }
                range = document.createRange();
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        };

        /**
         * convert URLs to clickable links in the provided element.
         *
         * URLs to handle:
         * <pre>
         *     magnet:?xt.1=urn:sha1:YNCKHTQCWBTRNJIV4WNAE52SJUQCZO5C&xt.2=urn:sha1:TXGCZQTH26NL6OUQAJJPFALHG2LTGBC7
         *     https://example.com:8800/zero/?6f09182b8ea51997#WtLEUO5Epj9UHAV9JFs+6pUQZp13TuspAUjnF+iM+dM=
         *     http://user:example.com@localhost:8800/zero/?6f09182b8ea51997#WtLEUO5Epj9UHAV9JFs+6pUQZp13TuspAUjnF+iM+dM=
         * </pre>
         *
         * @name   Helper.urls2links
         * @function
         * @param  {HTMLElement} element
         * @param  {Boolean} strict - optional
         */
        me.urls2links = function (element, strict = true) {
            const raw = element.innerHTML;
            element.innerHTML = DOMPurify.sanitize(
                raw.replace(
                    /(((https?|ftp):\/\/[\w?!=&.\/;#@~%+*-]+(?![\w\s?!&.\/;#~%"=-]>))|((magnet):[\w?=&.\/;#@~%+*-]+))/ig,
                    '<a href="$1">$1</a>'
                ),
                strict ? purifyHtmlConfigStrictSubset : purifyHtmlConfig
            );
            element.querySelectorAll('a').forEach(function (link) {
                const href = link.getAttribute('href');
                if (href && href.match(/^(?:(?:(?:f|ht)tps?|mailto|magnet):)/i)) {
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'nofollow noopener noreferrer');
                }
            });
        };

        /**
         * minimal sprintf emulation for %s and %d formats
         *
         * Note that this function needs the parameters in the same order as the
         * format strings appear in the string, contrary to the original.
         *
         * @see    {@link https://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format#4795914}
         * @name   Helper.sprintf
         * @function
         * @param  {string} format
         * @param  {...*} args - one or multiple parameters injected into format string
         * @return {string}
         */
        me.sprintf = function () {
            const args = Array.prototype.slice.call(arguments);
            let format = args[0],
                i = 1;
            return format.replace(/%(s|d)/g, function (m) {
                let val = args[i];
                if (m === '%d') {
                    val = parseFloat(val);
                    if (isNaN(val)) {
                        val = 0;
                    }
                }
                ++i;
                return val;
            });
        };

        /**
         * get value of cookie, if it was set, empty string otherwise
         *
         * @see    {@link http://www.w3schools.com/js/js_cookies.asp}
         * @name   Helper.getCookie
         * @function
         * @param  {string} cname - may not be empty
         * @return {string}
         */
        me.getCookie = function (cname) {
            const name = cname + '=',
                ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; ++i) {
                let c = ca[i].trim();
                if (c.startsWith(name))
                {
                    return c.substring(name.length, c.length);
                }
            }
            return '';
        };

        /**
         * get the current location (without search or hash part of the URL),
         * eg. https://example.com/path/?aaaa#bbbb --> https://example.com/path/
         *
         * @name   Helper.baseUri
         * @function
         * @return {string}
         */
        me.baseUri = function () {
            // check for cached version
            if (baseUri !== null) {
                return baseUri;
            }

            baseUri = window.location.origin + window.location.pathname;
            return baseUri;
        };

        /**
         * wrap an object into a Paste, used for mocking in the unit tests
         *
         * @name   Helper.PasteFactory
         * @function
         * @param  {object} data
         * @return {Paste}
         */
        me.PasteFactory = function (data) {
            return new Paste(data);
        };

        /**
         * wrap an object into a Comment, used for mocking in the unit tests
         *
         * @name   Helper.CommentFactory
         * @function
         * @param  {object} data
         * @return {Comment}
         */
        me.CommentFactory = function (data) {
            return new Comment(data);
        };

        /**
         * convert all applicable characters to HTML entities
         *
         * @see    {@link https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html}
         * @name   Helper.htmlEntities
         * @function
         * @param  {string} str
         * @return {string} escaped HTML
         */
        me.htmlEntities = function (str) {
            return String(str).replace(
                /[&<>"'`=\/]/g, function (s) {
                    return entityMap[s];
                }
            );
        };

        /**
         * calculate expiration date given initial date and expiration period
         *
         * @name   Helper.calculateExpirationDate
         * @function
         * @param  {Date} initialDate - may not be empty
         * @param  {string|number} expirationDisplayStringOrSecondsToExpire - may not be empty
         * @return {Date}
         */
        me.calculateExpirationDate = function (initialDate, expirationDisplayStringOrSecondsToExpire) {
            let expirationDate = new Date(initialDate),
                secondsToExpiration = expirationDisplayStringOrSecondsToExpire;
            if (typeof expirationDisplayStringOrSecondsToExpire === 'string') {
                secondsToExpiration = me.durationToSeconds(expirationDisplayStringOrSecondsToExpire);
            }

            if (typeof secondsToExpiration !== 'number') {
                throw new Error('Cannot calculate expiration date.');
            }
            if (secondsToExpiration === 0) {
                return null;
            }

            expirationDate = expirationDate.setUTCSeconds(expirationDate.getUTCSeconds() + secondsToExpiration);
            return expirationDate;
        };

        /**
         * Convert Bytes to kB/MB/GB/TB/PB/EB/ZB/YB
         *
         * @name   Helper.formatBytes
         * @function
         *
         * @param  {number} bytes
         * @return {string}
         */
        me.formatBytes = function (bytes) {
            let result = '';
            const kilobyte = 1000;
            const decimalPoint = 2;
            const sizes = [
                I18n._('B'), I18n._('kB'), I18n._('MB'), I18n._('GB'), I18n._('TB'),
                I18n._('PB'), I18n._('EB'), I18n._('ZB'), I18n._('YB')
            ];
            const index = Math.floor(Math.log(bytes) / Math.log(kilobyte));

            if (bytes > 0) {
                result = parseFloat((bytes / Math.pow(kilobyte, index)).toFixed(decimalPoint)) + ' ' + sizes[index];
            } else {
                result = `0 ${I18n._('B')}`;
            }

            return result;
        };

        /**
         * resets state, used for unit testing
         *
         * @name   Helper.reset
         * @function
         */
        me.reset = function () {
            baseUri = null;
        };

        /**
         * check if bootstrap5 object detected
         *
         * @name Helper.isBootstrap5
         * @returns {Boolean}
         */
        me.isBootstrap5 = function () {
            return typeof bootstrap !== 'undefined';
        };

        return me;
    })();

    /**
     * internationalization module
     *
     * @name I18n
     * @class
     */
    const I18n = (function () {
        const me = {};

        /**
         * const for string of loaded language
         *
         * @name I18n.languageLoadedEvent
         * @private
         * @prop   {string}
         * @readonly
         */
        const languageLoadedEvent = 'languageLoaded';

        /**
         * supported languages, minus the built in 'en'
         *
         * @name I18n.supportedLanguages
         * @private
         * @prop   {string[]}
         * @readonly
         */
        const supportedLanguages = ['ar', 'bg', 'ca', 'co', 'cs', 'de', 'el', 'es', 'et', 'fa', 'fi', 'fr', 'he', 'hu', 'id', 'it', 'ja', 'jbo', 'ko', 'lt', 'no', 'nl', 'pl', 'pt', 'oc', 'ro', 'ru', 'sk', 'sl', 'sv', 'th', 'tr', 'uk', 'zh', 'zh-tw'];

        /**
         * built in language
         *
         * @name I18n.language
         * @private
         * @prop   {string|null}
         */
        let language = null;

        /**
         * translation cache
         *
         * @name I18n.translations
         * @private
         * @enum   {Object}
         */
        let translations = Object.create(null);

        /**
         * translate a string, alias for I18n.translate
         *
         * @name   I18n._
         * @function
         * @param  {HTMLElement} element - optional
         * @param  {string} messageId
         * @param  {...*} args - one or multiple parameters injected into placeholders
         * @return {string}
         */
        me._ = function () {
            return me.translate.apply(this, arguments);
        };

        /**
         * translate a string
         *
         * Optionally pass an HTMLElement as the first parameter, to automatically
         * let the text of this element be replaced. In case the (asynchronously
         * loaded) language is not downloaded yet, this will make sure the string
         * is replaced when it eventually gets loaded. Using this is both simpler
         * and more secure, as it avoids potential XSS when inserting text.
         * The next parameter is the message ID, matching the ones found in
         * the translation files under the i18n directory.
         * Any additional parameters will get inserted into the message ID in
         * place of %s (strings) or %d (digits), applying the appropriate plural
         * in case of digits. See also Helper.sprintf().
         *
         * @name   I18n.translate
         * @function
         * @param  {HTMLElement} element - optional
         * @param  {string} messageId
         * @param  {...*} args - one or multiple parameters injected into placeholders
         * @return {string}
         */
        me.translate = function () // eslint-disable-line complexity
        {
            // convert parameters to array
            let args = Array.prototype.slice.call(arguments),
                messageId,
                element = null;

            // parse arguments
            if (args[0] === null || args[0] instanceof HTMLElement) {
                // optional HTMLElement as first parameter (null means element not found)
                element = args[0];
                args.shift();
            }

            // extract messageId from arguments
            let usesPlurals = Array.isArray(args[0]);
            if (usesPlurals) {
                // use the first plural form as messageId, otherwise the singular
                messageId = args[0].length > 1 ? args[0][1] : args[0][0];
            } else {
                messageId = args[0];
            }

            if (messageId.length === 0) {
                return messageId;
            }

            // if no translation string cannot be found (in translations object)
            if (!Object.prototype.hasOwnProperty.call(translations, messageId) || language === null) {
                // if language is still loading and we have an element assigned
                if (language === null && element !== null) {
                    // handle the error by attaching the language loaded event
                    let orgArguments = arguments;
                    document.addEventListener(languageLoadedEvent, function () {
                        // re-execute this function
                        me.translate.apply(this, orgArguments);
                    });

                    // and fall back to English for now until the real language
                    // file is loaded
                }

                // for all other languages than English for which this behaviour
                // is expected as it is built-in, log error
                if (language !== null && language !== 'en') {
                    console.error('Missing translation for: ', messageId, 'in language', language);
                    // fallback to English
                }

                // save English translation (should be the same on both sides)
                translations[messageId] = args[0];
            }

            // lookup plural translation
            if (usesPlurals && Array.isArray(translations[messageId])) {
                let n = parseInt(args[1] || 1, 10),
                    key = me.getPluralForm(n),
                    maxKey = translations[messageId].length - 1;
                if (key > maxKey) {
                    key = maxKey;
                }
                args[0] = translations[messageId][key];
                args[1] = n;
            } else {
                // lookup singular translation
                args[0] = translations[messageId];
            }

            // messageID may contain HTML, but should be from a trusted source (code or translation JSON files)
            let containsHtml = isStringContainsHtml(args[0]);

            // prevent double encoding, when we insert into a text node
            if (containsHtml || element === null) {
                for (let i = 0; i < args.length; ++i) {
                    // parameters (i > 0) may never contain HTML as they may come from untrusted parties
                    if ((containsHtml ? i > 1 : i > 0) || !containsHtml) {
                        args[i] = Helper.htmlEntities(args[i]);
                    }
                }
            }
            // format string
            let output = Helper.sprintf.apply(this, args);

            if (containsHtml) {
                // only allow tags/attributes we actually use in translations
                output = DOMPurify.sanitize(output, purifyTranslationConfig);
            }

            // if element is given, insert translation
            if (element !== null) {
                if (containsHtml) {
                    element.innerHTML = output;
                } else {
                    // text node takes care of entity encoding
                    element.textContent = output;
                }
                return '';
            }

            return output;
        };

        /**
         * get currently loaded language
         *
         * @name   I18n.getLanguage
         * @function
         * @return {string}
         */
        me.getLanguage = function () {
            return language;
        };

        /**
         * per language functions to use to determine the plural form
         *
         * @see    {@link https://docs.translatehouse.org/projects/localization-guide/en/latest/l10n/pluralforms.html}
         * @name   I18n.getPluralForm
         * @function
         * @param  {int} n
         * @return {int} array key
         */
        me.getPluralForm = function (n) { // eslint-disable-line complexity
            switch (language) {
                case 'ar':
                    return n === 0 ? 0 : (n === 1 ? 1 : (n === 2 ? 2 : (n % 100 >= 3 && n % 100 <= 10 ? 3 : (n % 100 >= 11 ? 4 : 5))));
                case 'cs':
                case 'sk':
                    return n === 1 ? 0 : (n >= 2 && n <= 4 ? 1 : 2);
                case 'co':
                case 'fa':
                case 'fr':
                case 'oc':
                case 'tr':
                case 'zh':
                case 'zh-tw':
                    return n > 1 ? 1 : 0;
                case 'he':
                    return n === 1 ? 0 : (n === 2 ? 1 : ((n < 0 || n > 10) && (n % 10 === 0) ? 2 : 3));
                case 'id':
                case 'ja':
                case 'jbo':
                case 'ko':
                case 'th':
                    return 0;
                case 'lt':
                    return n % 10 === 1 && n % 100 !== 11 ? 0 : ((n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20)) ? 1 : 2);
                case 'pl':
                    return n === 1 ? 0 : (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
                case 'ro':
                    return n === 1 ? 0 : ((n === 0 || (n % 100 > 0 && n % 100 < 20)) ? 1 : 2);
                case 'ru':
                case 'uk':
                    return n % 10 === 1 && n % 100 !== 11 ? 0 : (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
                case 'sl':
                    return n % 100 === 1 ? 1 : (n % 100 === 2 ? 2 : (n % 100 === 3 || n % 100 === 4 ? 3 : 0));
                // bg, ca, de, el, en, es, et, fi, hu, it, nl, no, pt, sv
                default:
                    return n !== 1 ? 1 : 0;
            }
        };

        /**
         * load translations into cache
         *
         * @name   I18n.loadTranslations
         * @function
         */
        me.loadTranslations = function () {
            let newLanguage = Helper.getCookie('lang');

            // auto-select language based on browser settings
            if (newLanguage.length === 0) {
                newLanguage = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
                const isTraditionalChinese = newLanguage.startsWith('zh-tw-') ||
                    newLanguage === 'zh-hant' || newLanguage.startsWith('zh-hant-') ||
                    newLanguage === 'zh-hk' || newLanguage.startsWith('zh-hk-') ||
                    newLanguage === 'zh-mo' || newLanguage.startsWith('zh-mo-');
                // alias Traditional Chinese browser tags to PrivateBin's zh-tw locale;
                // otherwise try the full tag and fall back to the base language
                if (isTraditionalChinese && supportedLanguages.includes('zh-tw')) {
                    newLanguage = 'zh-tw';
                } else if (!supportedLanguages.includes(newLanguage) && newLanguage.includes('-')) {
                    newLanguage = newLanguage.split('-')[0];
                }
            }

            // if language is already used skip update
            if (newLanguage === language) {
                return;
            }

            // if language is built-in (English) skip update
            if (newLanguage === 'en') {
                language = 'en';
                return;
            }

            // if language is not supported, show error
            if (!supportedLanguages.includes(newLanguage)) {
                console.error('Language \'%s\' is not supported. Translation failed, fallback to English.', newLanguage);
                language = 'en';
                return;
            }

            // load strings from JSON
            const scriptTag = document.querySelector('script[src^="js/privatebin.js"]');
            const cacheBreaker = scriptTag ? (scriptTag.getAttribute('src').split('.js')[1] || '') : '';
            fetch('i18n/' + newLanguage + '.json' + cacheBreaker)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('HTTP ' + response.status + ' ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    language = newLanguage;
                    translations = Object.assign(Object.create(null), data);
                    document.dispatchEvent(new CustomEvent(languageLoadedEvent));
                })
                .catch(error => {
                    console.error(`Language \'${newLanguage}\' could not be loaded (${error.message}). Translation failed, fallback to English.`);
                    language = 'en';
                });
        };

        /**
         * Register a callback to be invoked when translations have been loaded.
         *
         * This is useful for code that needs to re-apply translated strings to
         * DOM attributes (e.g. title attributes) that cannot be handled by
         * I18n.translate's built-in element re-translation mechanism (which only
         * sets textContent/innerHTML).
         *
         * Note: If translations are already loaded when this is called, the
         * callback will not be invoked. Callers should apply the translation
         * immediately as well, to cover the case where the language is already
         * available.
         *
         * @name   I18n.onLanguageLoaded
         * @function
         * @param     {function} callback - function to call when language is loaded
         */
        me.onLanguageLoaded = function (callback) {
            document.addEventListener(languageLoadedEvent, callback);
        };

        /**
         * resets state, used for unit testing
         *
         * @name   I18n.reset
         * @function
         */
        me.reset = function (mockLanguage, mockTranslations) {
            language = mockLanguage || null;
            translations = mockTranslations || Object.create(null);
        };

        /**
         * Check if string contains valid HTML code.
         *
         * If it is no string at all, this always returns false for compatibility.
         *
         * @name I18n.isStringContainsHtml
         * @function
         * @private
         * @param {string|object} messageId
         * @returns {boolean}
         */
        function isStringContainsHtml(messageId) {
            // message IDs are allowed to contain anchors, spans, keyboard and emphasis tags
            // we can recognize all of them by only checking for anchors and keyboard tags
            return typeof messageId === 'string' && (messageId.includes('<a') || messageId.includes('<kbd'));
        }

        return me;
    })();

    /**
     * handles everything related to en/decryption
     *
     * @name CryptTool
     * @class
     */
    const CryptTool = (function () {
        const me = {};

        /**
         * base58 encoder & decoder
         *
         * @private
         */
        const base58 = new baseX('123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz');

        /**
         * convert ArrayBuffer into a UTF-8 string
         *
         * Iterates over the bytes of the array, catenating them into a string
         *
         * @name   CryptTool.arraybufferToString
         * @function
         * @private
         * @param  {ArrayBuffer} messageArray
         * @return {string} message
         */
        function arraybufferToString(messageArray)
        {
            return Array.from(new Uint8Array(messageArray))
                .map(byte => String.fromCharCode(byte))
                .join('');
        }

        /**
         * convert UTF-8 string into a Uint8Array
         *
         * Iterates over the bytes of the message, writing them to the array
         *
         * @name   CryptTool.stringToArraybuffer
         * @function
         * @private
         * @param  {string} message UTF-8 string
         * @return {Uint8Array} array
         */
        function stringToArraybuffer(message)
        {
            return Uint8Array.from(
                message,
                character => character.charCodeAt(0)
            );
        }

        /**
         * compress a string (deflate compression), returns buffer
         *
         * @name   CryptTool.compress
         * @async
         * @function
         * @private
         * @param  {string} message
         * @param  {string} mode
         * @param  {object} zlib
         * @throws {string}
         * @return {ArrayBuffer} data
         */
        async function compress(message, mode, zlib) {
            message = new TextEncoder().encode(message);
            if (mode === 'zlib') {
                if (typeof zlib === 'undefined') {
                    throw new Error('Error compressing document, due to missing WebAssembly support.');
                }
                return zlib.deflate(message).buffer;
            }
            return message;
        }

        /**
         * decompress potentially base64 encoded, deflate compressed buffer, returns string
         *
         * @name   CryptTool.decompress
         * @async
         * @function
         * @private
         * @param  {ArrayBuffer} data
         * @param  {string} mode
         * @param  {object} zlib
         * @throws {string}
         * @return {string} message
         */
        async function decompress(data, mode, zlib) {
            if (mode === 'zlib') {
                if (typeof zlib === 'undefined') {
                    throw new Error('Error decompressing document, your browser does not support WebAssembly. Please use another browser to view this document.');
                }
                data = zlib.inflate(
                    new Uint8Array(data)
                ).buffer;
            }
            return new TextDecoder('utf-8', {fatal: true}).decode(data);
        }

        /**
         * returns specified number of random bytes
         *
         * @name   CryptTool.getRandomBytes
         * @function
         * @private
         * @param  {int} length number of random bytes to fetch
         * @throws {string}
         * @return {string} random bytes
         */
        function getRandomBytes(length) {
            let bytes = '';
            const byteArray = new Uint8Array(length);
            window.crypto.getRandomValues(byteArray);
            for (let i = 0; i < length; ++i) {
                bytes += String.fromCharCode(byteArray[i]);
            }
            return bytes;
        }

        /**
         * derive cryptographic key from key string and password
         *
         * @name   CryptTool.deriveKey
         * @async
         * @function
         * @private
         * @param  {string} key
         * @param  {string} password
         * @param  {array}  spec cryptographic specification
         * @return {CryptoKey} derived key
         */
        async function deriveKey(key, password, spec) {
            let keyArray = stringToArraybuffer(key);
            if (password.length > 0) {
                let passwordArray = stringToArraybuffer(password),
                    newKeyArray = new Uint8Array(keyArray.length + passwordArray.length);
                newKeyArray.set(keyArray, 0);
                newKeyArray.set(passwordArray, keyArray.length);
                keyArray = newKeyArray;
            }

            // import raw key
            const importedKey = await window.crypto.subtle.importKey(
                'raw', // only 'raw' is allowed
                keyArray,
                { name: 'PBKDF2' }, // we use PBKDF2 for key derivation
                false, // the key may not be exported
                ['deriveKey'] // we may only use it for key derivation
            ).catch(Alert.showError);

            // derive a stronger key for use with AES
            return window.crypto.subtle.deriveKey(
                {
                    name: 'PBKDF2', // we use PBKDF2 for key derivation
                    salt: stringToArraybuffer(spec[1]), // salt used in HMAC
                    iterations: spec[2], // amount of iterations to apply
                    hash: { name: 'SHA-256' } // can be "SHA-1", "SHA-256", "SHA-384" or "SHA-512"
                },
                importedKey,
                {
                    name: 'AES-' + spec[6].toUpperCase(), // can be any supported AES algorithm ("AES-CTR", "AES-CBC", "AES-CMAC", "AES-GCM", "AES-CFB", "AES-KW", "ECDH", "DH" or "HMAC")
                    length: spec[3] // can be 128, 192 or 256
                },
                false, // the key may not be exported
                ['encrypt', 'decrypt'] // we may only use it for en- and decryption
            ).catch(Alert.showError);
        }

        /**
         * gets crypto settings from specification and authenticated data
         *
         * @name   CryptTool.cryptoSettings
         * @function
         * @private
         * @param  {string} adata authenticated data
         * @param  {array}  spec cryptographic specification
         * @return {object} crypto settings
         */
        function cryptoSettings(adata, spec) {
            return {
                name: 'AES-' + spec[6].toUpperCase(), // can be any supported AES algorithm ("AES-CTR", "AES-CBC", "AES-CMAC", "AES-GCM", "AES-CFB", "AES-KW", "ECDH", "DH" or "HMAC")
                iv: stringToArraybuffer(spec[0]), // the initialization vector you used to encrypt
                additionalData: stringToArraybuffer(adata), // the addtional data you used during encryption (if any)
                tagLength: spec[4] // the length of the tag you used to encrypt (if any)
            };
        }

        /**
         * compress, then encrypt message with given key and password
         *
         * @name   CryptTool.cipher
         * @async
         * @function
         * @param  {string} key
         * @param  {string} password
         * @param  {string} message
         * @param  {array}  adata
         * @return {array}  encrypted message in base64 encoding & adata containing encryption spec
         */
        me.cipher = async function (key, password, message, adata) {
            let zlib = (await z);
            // AES in Galois Counter Mode, keysize 256 bit,
            // authentication tag 128 bit, 10000 iterations in key derivation
            const compression = (
                typeof zlib === 'undefined' ?
                    'none' : // client lacks support for WASM
                    (document.body.dataset.compression || 'zlib')
            ),
                spec = [
                    getRandomBytes(16), // initialization vector
                    getRandomBytes(8),  // salt
                    100000,             // iterations
                    256,                // key size
                    128,                // tag size
                    'aes',              // algorithm
                    'gcm',              // algorithm mode
                    compression         // compression
                ], encodedSpec = [];
            for (let i = 0; i < spec.length; ++i) {
                encodedSpec[i] = i < 2 ? btoa(spec[i]) : spec[i];
            }
            if (adata.length === 0) {
                // comment
                adata = encodedSpec;
            } else if (adata[0] === null) {
                // paste
                adata[0] = encodedSpec;
            }

            // finally, encrypt message
            return [
                btoa(
                    arraybufferToString(
                        await window.crypto.subtle.encrypt(
                            cryptoSettings(JSON.stringify(adata), spec),
                            await deriveKey(key, password, spec),
                            await compress(message, compression, zlib)
                        ).catch(Alert.showError)
                    )
                ),
                adata
            ];
        };

        /**
         * decrypt message with key, then decompress
         *
         * @name   CryptTool.decipher
         * @async
         * @function
         * @param  {string} key
         * @param  {string} password
         * @param  {string|object} data encrypted message
         * @return {string} decrypted message, empty if decryption failed
         */
        me.decipher = async function (key, password, data) {
            let adataString, spec, cipherMessage, plaintext;
            let zlib = (await z);
            if (data instanceof Array) {
                // version 2
                adataString = JSON.stringify(data[1]);
                // clone the array instead of passing the reference
                spec = (data[1][0] instanceof Array ? data[1][0] : data[1]).slice();
                cipherMessage = data[0];
            } else {
                throw 'unsupported message format';
            }
            spec[0] = atob(spec[0]);
            spec[1] = atob(spec[1]);
            if (spec[7] === 'zlib') {
                if (typeof zlib === 'undefined') {
                    throw 'Error decompressing document, your browser does not support WebAssembly. Please use another browser to view this document.';
                }
            }
            try {
                plaintext = await window.crypto.subtle.decrypt(
                    cryptoSettings(adataString, spec),
                    await deriveKey(key, password, spec),
                    stringToArraybuffer(
                        atob(cipherMessage)
                    )
                );
            } catch (err) {
                console.error(err);
                return '';
            }
            try {
                return await decompress(plaintext, spec[7], zlib);
            } catch (err) {
                Alert.showError(err);
                return err;
            }
        };

        /**
         * returns a random symmetric key
         *
         * generates 256 bit long keys (8 Bits * 32) for AES with 256 bit long blocks
         *
         * @name   CryptTool.getSymmetricKey
         * @function
         * @throws {string}
         * @return {string} raw bytes
         */
        me.getSymmetricKey = function () {
            return getRandomBytes(32);
        };

        /**
         * base58 encode a DOMString (UTF-16)
         *
         * @name   CryptTool.base58encode
         * @function
         * @param  {string} input
         * @return {string} output
         */
        me.base58encode = function (input) {
            return base58.encode(
                stringToArraybuffer(input)
            );
        };

        /**
         * base58 decode a DOMString (UTF-16)
         *
         * @name   CryptTool.base58decode
         * @function
         * @param  {string} input
         * @return {string} output
         */
        me.base58decode = function (input) {
            return arraybufferToString(
                base58.decode(input)
            );
        };

        return me;
    })();

    /**
     * (Model) Data source (aka MVC)
     *
     * @name   Model
     * @class
     */
    const Model = (function () {
        const me = {};

        let id = null,
            pasteData = null,
            symmetricKey = null,
            templates;

        /**
         * returns the expiration set in the HTML
         *
         * @name   Model.getExpirationDefault
         * @function
         * @return string
         */
        me.getExpirationDefault = function () {
            const element = document.getElementById('pasteExpiration');
            return element ? element.value : '';
        };

        /**
         * returns the format set in the HTML
         *
         * @name   Model.getFormatDefault
         * @function
         * @return string
         */
        me.getFormatDefault = function () {
            const element = document.getElementById('pasteFormatter');
            return element ? element.value : '';
        };

        /**
         * returns the document data (including the cipher data)
         *
         * @name   Model.getPasteData
         * @function
         * @param {function} callback (optional) Called when data is available
         * @param {function} useCache (optional) Whether to use the cache or
         *                            force a data reload. Default: true
         * @return string
         */
        me.getPasteData = function (callback, useCache) {
            // use cache if possible/allowed
            if (useCache !== false && pasteData !== null) {
                //execute callback
                if (typeof callback === 'function') {
                    return callback(pasteData);
                }

                // alternatively just using inline
                return pasteData;
            }

            // reload data
            ServerInteraction.prepare();
            ServerInteraction.setUrl(Helper.baseUri() + '?pasteid=' + me.getPasteId());

            ServerInteraction.setFailure(function (status, data) {
                // revert loading status…
                Alert.hideLoading();
                TopNav.showViewButtons();

                // show error message
                Alert.showError(ServerInteraction.parseUploadError(status, data, 'get document data'));
            });
            ServerInteraction.setSuccess(function (status, data) {
                pasteData = new Paste(data);

                if (typeof callback === 'function') {
                    return callback(pasteData);
                }
            });
            ServerInteraction.run();
        };

        /**
         * get the documents unique identifier from the URL,
         * eg. https://example.com/path/?c05354954c49a487#dfdsdgdgdfgdf returns c05354954c49a487
         *
         * @name   Model.getPasteId
         * @function
         * @return {string} unique identifier
         * @throws {string}
         */
        me.getPasteId = function () {
            const idRegEx = /^[a-f0-9]{16}$/;

            // return cached value
            if (id !== null) {
                return id;
            }

            // do use URL interface, if possible
            const url = new URL(window.location);

            for (const param of url.searchParams) {
                const key = param[0];
                const value = param[1];

                if (value === '' && idRegEx.test(key)) {
                    // safe, as the whole regex is matched
                    id = key;
                    return key;
                }
            }

            if (id === null) {
                throw 'no document id given';
            }

            return id;
        };

        /**
         * returns true, when the URL has a delete token and the current call was used for deleting a document.
         *
         * @name   Model.hasDeleteToken
         * @function
         * @return {bool}
         */
        me.hasDeleteToken = function () {
            return (new URL(window.location)).searchParams.has('deletetoken');
        };

        /**
         * return the deciphering key stored in anchor part of the URL
         *
         * @name   Model.getPasteKey
         * @function
         * @return {string|null} key
         * @throws {string}
         */
        me.getPasteKey = function () {
            if (symmetricKey === null) {
                let startPos = 1;
                if (window.location.hash.startsWith(loadConfirmPrefix)) {
                    startPos = loadConfirmPrefix.length;
                }
                let newKey = window.location.hash.substring(startPos);

                // Some web 2.0 services and redirectors add data AFTER the anchor
                // (such as &utm_source=...). We will strip any additional data.
                let ampersandPos = newKey.indexOf('&');
                if (ampersandPos > -1) {
                    newKey = newKey.substring(0, ampersandPos);
                }
                if (newKey === '') {
                    throw 'no encryption key given';
                }

                // version 2 uses base58, version 1 uses base64 without decoding
                try {
                    // base58 encode strips NULL bytes at the beginning of the
                    // string, so we re-add them if necessary
                    symmetricKey = CryptTool.base58decode(newKey).padStart(32, '\u0000');
                } catch (e) {
                    throw 'encryption key of unsupported format given or incomplete, mangled URL';
                }
            }

            return symmetricKey;
        };

        /**
         * returns a copy of the HTML template
         *
         * @name Model.getTemplate
         * @function
         * @param  {string} name - the name of the template
         * @return {HTMLElement}
         */
        me.getTemplate = function (name) {
            // find template
            const template = document.getElementById(name + 'template');
            if (!template || !templates.contains(template)) {
                return null;
            }
            let element = template.cloneNode(true);
            // change ID to avoid collisions (one ID should really be unique)
            element.id = name;
            return element;
        };

        /**
         * resets state, used for unit testing
         *
         * @name   Model.reset
         * @function
         */
        me.reset = function () {
            pasteData = templates = id = symmetricKey = null;
        };

        /**
         * init navigation manager
         *
         * preloads elements
         *
         * @name   Model.init
         * @function
         */
        me.init = function () {
            templates = document.getElementById('templates');
        };

        return me;
    })();

    /**
     * Helper functions for user interface
     *
     * everything directly UI-related, which fits nowhere else
     *
     * @name   UiHelper
     * @class
     */
    const UiHelper = (function () {
        const me = {};

        /**
         * handle history (pop) state changes
         *
         * currently this does only handle redirects to the home page.
         *
         * @name   UiHelper.historyChange
         * @private
         * @function
         * @param  {Event} event
         */
        function historyChange(event) {
            let currentLocation = Helper.baseUri();
            if (event.originalEvent.state === null && // no state object passed
                event.target.location.href === currentLocation && // target location is home page
                window.location.href === currentLocation // and we are not already on the home page
            ) {
                // redirect to home page
                window.location.href = currentLocation;
            }
        }

        /**
         * reload the page
         *
         * This takes the user to the PrivateBin homepage.
         *
         * @name   UiHelper.reloadHome
         * @function
         */
        me.reloadHome = function () {
            window.location.href = Helper.baseUri();
        };


        /**
         * trigger a history (pop) state change
         *
         * used to test the UiHelper.historyChange private function
         *
         * @name   UiHelper.mockHistoryChange
         * @function
         * @param  {string} state   (optional) state to mock
         */
        me.mockHistoryChange = function (state) {
            if (typeof state === 'undefined') {
                state = null;
            }
            historyChange({ originalEvent: new PopStateEvent('popstate', { state: state }), target: window });
        };

        /**
         * initialize
         *
         * @name   UiHelper.init
         * @function
         */
        me.init = function () {
            // update link to home page
            document.querySelectorAll('.reloadlink').forEach(link => (link.href = Helper.baseUri()));

            window.addEventListener('popstate', historyChange);
        };

        return me;
    })();

    /**
     * Alert/error manager
     *
     * @name   Alert
     * @class
     */
    const Alert = (function () {
        const me = {};

        let errorMessage,
            loadingIndicator,
            statusMessage,
            remainingTime,
            currentIcon,
            customHandler;

        const alertType = [
            'loading', // not in bootstrap CSS, but using a plausible value here
            'info',    // status icon
            'warning', // warning icon
            'danger'   // error icon
        ];

        /**
         * forwards a request to the i18n module and shows the element
         *
         * @name   Alert.handleNotification
         * @private
         * @function
         * @param  {number} id - id of notification
         * @param  {HTMLElement} element - HTML element
         * @param  {string|array} args
         * @param  {string|null} icon - optional, icon
         */
        function handleNotification(id, element, args, icon) {
            // basic parsing/conversion of parameters
            if (typeof icon === 'undefined') {
                icon = null;
            }
            if (typeof args === 'undefined') {
                args = null;
            } else if (typeof args === 'string') {
                // convert string to array if needed
                args = [args];
            } else if (args instanceof Error) {
                // extract message into array if needed
                args = [args.message];
            }

            // function guard
            if (!element) {
                throw new TypeError(`invalid/no element (${element}) given for alert type ${alertType[id]} with ID ${id}`);
            }

            // pass to custom handler if defined
            if (typeof customHandler === 'function') {
                let handlerResult = customHandler(alertType[id], element, args, icon);
                if (handlerResult === true) {
                    // if it returns true, skip own handler
                    return;
                }
                if (handlerResult instanceof HTMLElement) {
                    // continue processing with new element
                    element = handlerResult;
                    icon = null; // icons not supported in this case
                }
            }
            let translationTarget = element;

            // handle icon, if template uses one
            const glyphIcon = element.querySelector(':first-child');
            if (glyphIcon) {
                // if there is an icon, we need to provide an inner element
                // to translate the message into, instead of the parent
                translationTarget = document.createElement('span');
                element.innerHTML = ' ';
                element.prepend(glyphIcon);
                element.appendChild(translationTarget);

                if (icon !== null && // icon was passed
                    icon !== currentIcon[id] // and it differs from current icon
                ) {
                    // remove (previous) icon
                    glyphIcon.classList.remove(currentIcon[id]);

                    // any other thing as a string (e.g. 'null') (only) removes the icon
                    if (typeof icon === 'string') {
                        // set new icon
                        currentIcon[id] = 'glyphicon-' + icon;
                        glyphIcon.classList.add(currentIcon[id]);
                    }
                }
            }

            // translate and insert message
            I18n._(translationTarget, ...args);

            // show element
            element.classList.remove('hidden');
        }

        /**
         * display a status message
         *
         * This automatically passes the text to I18n for translation.
         *
         * @name   Alert.showStatus
         * @function
         * @param  {string|array} message     string, use an array for %s/%d options
         * @param  {string|null}  icon        optional, the icon to show,
         *                                    default: leave previous icon
         */
        me.showStatus = function (message, icon) {
            handleNotification(1, statusMessage, message, icon);
        };

        /**
         * display a warning message
         *
         * This automatically passes the text to I18n for translation.
         *
         * @name   Alert.showWarning
         * @function
         * @param  {string|array} message     string, use an array for %s/%d options
         * @param  {string|null}  icon        optional, the icon to show, default:
         *                                    leave previous icon
         */
        me.showWarning = function (message, icon) {
            const glyphIcon = errorMessage.querySelector(':first-child');
            if (glyphIcon) {
                glyphIcon.classList.remove(currentIcon[3]);
                glyphIcon.classList.add(currentIcon[2]);
            }
            handleNotification(2, errorMessage, message, icon);
        };

        /**
         * display an error message
         *
         * This automatically passes the text to I18n for translation.
         *
         * @name   Alert.showError
         * @function
         * @param  {string|array} message     string, use an array for %s/%d options
         * @param  {string|null}  icon        optional, the icon to show, default:
         *                                    leave previous icon
         */
        me.showError = function (message, icon) {
            handleNotification(3, errorMessage, message, icon);
        };

        /**
         * display remaining message
         *
         * This automatically passes the text to I18n for translation.
         *
         * @name   Alert.showRemaining
         * @function
         * @param  {string|array} message     string, use an array for %s/%d options
         */
        me.showRemaining = function (message) {
            handleNotification(1, remainingTime, message);
        };

        /**
         * shows a loading message, optionally with a percentage
         *
         * This automatically passes all texts to the i10s module.
         *
         * @name   Alert.showLoading
         * @function
         * @param  {string|array|null} message      optional, use an array for %s/%d options, default: 'Loading…'
         * @param  {string|null}       icon         optional, the icon to show, default: leave previous icon
         */
        me.showLoading = function (message, icon) {
            // default message text
            if (typeof message === 'undefined') {
                message = 'Loading…';
            }

            handleNotification(0, loadingIndicator, message, icon);

            // show loading status (cursor)
            document.body.classList.add('loading');
        };

        /**
         * hides the loading message
         *
         * @name   Alert.hideLoading
         * @function
         */
        me.hideLoading = function () {
            loadingIndicator.classList.add('hidden');

            // hide loading cursor
            document.body.classList.remove('loading');
        };

        /**
         * hides any status/error messages
         *
         * This does not include the loading message.
         *
         * @name   Alert.hideMessages
         * @function
         */
        me.hideMessages = function () {
            statusMessage.classList.add('hidden');
            errorMessage.classList.add('hidden');
        };

        /**
         * set a custom handler, which gets all notifications.
         *
         * This handler gets the following arguments:
         * alertType (see array), $element, args, icon
         * If it returns true, the own processing will be stopped so the message
         * will not be displayed. Otherwise it will continue.
         * As an aditional feature it can return a HTMLElement, which will
         * then be used to add the message there. Icons are not supported in
         * that case and will be ignored.
         * Pass 'null' to reset/delete the custom handler.
         * Note that there is no notification when a message is supposed to get
         * hidden.
         *
         * @name   Alert.setCustomHandler
         * @function
         * @param {function|null} newHandler
         */
        me.setCustomHandler = function (newHandler) {
            customHandler = newHandler;
        };

        /**
         * init status manager
         *
         * preloads HTMLElements
         *
         * @name   Alert.init
         * @function
         */
        me.init = function () {
            // hide "no javascript" error message (guard in test environments)
            const noscriptEl = document.getElementById('noscript');
            if (noscriptEl) {
                noscriptEl.style.display = 'none';
            }

            // not a reset, but first set of the elements
            errorMessage = document.getElementById('errormessage');
            loadingIndicator = document.getElementById('loadingindicator');
            statusMessage = document.getElementById('status');
            remainingTime = document.getElementById('remainingtime');

            currentIcon = [
                'glyphicon-time', // loading icon
                'glyphicon-info-sign', // status icon
                'glyphicon-warning-sign', // warning icon
                'glyphicon-alert' // error icon
            ];
        };

        return me;
    })();

    /**
     * handles paste status/result
     *
     * @name   PasteStatus
     * @class
     */
    const PasteStatus = (function () {
        const me = {};

        let pasteSuccess,
            pasteUrl,
            remainingTime,
            shortenButton;

        /**
         * forward to URL shortener
         *
         * @name   PasteStatus.sendToShortener
         * @private
         * @function
         */
        function sendToShortener() {
            if (shortenButton.classList.contains('buttondisabled')) {
                return;
            }
            fetch(`${shortenButton.dataset.shortener}${encodeURIComponent(pasteUrl.href)}`, {
                method: 'GET',
                headers: { 'Accept': 'text/html, application/xhtml+xml, application/xml, application/json' },
                credentials: 'omit',
                signal: AbortSignal.timeout(10000)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('HTTP ' + response.status);
                    }
                    return response.text();
                })
                .then(data => PasteStatus.extractUrl(data))
                .catch(error => {
                    console.error('Shortener error:', error);
                    // we don't know why it failed, could be CORS of the external
                    // server not setup properly, in which case we follow old
                    // behavior to open it in new tab
                    window.open(
                        `${shortenButton.dataset.shortener}${encodeURIComponent(pasteUrl.href)}`,
                        '_blank',
                        'noopener, noreferrer'
                    );
                });
        }

        /**
         * Forces opening the document if the link does not do this automatically.
         *
         * This is necessary as browsers will not reload the page when it is
         * already loaded (which is fake as it is set via history.pushState()).
         *
         * @name   PasteStatus.pasteLinkClick
         * @function
         */
        function pasteLinkClick() {
            // check if location is (already) shown in URL bar
            if (window.location.href === pasteUrl.href) {
                // if so we need to load link by reloading the current site
                window.location.reload(true);
            }
        }

        /**
         * creates a notification after a successful document upload
         *
         * @name   PasteStatus.createPasteNotification
         * @function
         * @param  {string} url
         * @param  {string} deleteUrl
         */
        me.createPasteNotification = function(url, deleteUrl)
        {
            const ua = navigator.userAgent;
            const isMac = /Mac/.test(ua);
            const hotkey = isMac ? I18n._('Cmd') : I18n._('Ctrl');
            I18n._(
                document.getElementById('pastelink'),
                'Your document is <a id="pasteurl" href="%s">%s</a> <span id="copyhint">(Hit <kbd>%s</kbd>+<kbd>c</kbd> to copy)</span>',
                url, url, hotkey
            );
            // save newly created element
            pasteUrl = document.getElementById('pasteurl');
            // and add click event
            if (pasteUrl) {
                pasteUrl.addEventListener('click', pasteLinkClick);
            }

            // delete link
            const deleteLink = document.getElementById('deletelink');
            if (deleteLink) {
                deleteLink.href = deleteUrl;
            }
            I18n._(document.querySelector('#deletelink span:not(.glyphicon)'), 'Delete data');

            // enable shortener button
            if (shortenButton) {
                shortenButton.classList.remove('buttondisabled');
            }

            // show result
            if (pasteSuccess) {
                pasteSuccess.classList.remove('hidden');
            }
            // we pre-select the link so that the user only has to [Ctrl]+[c] the link
            Helper.selectText(pasteUrl);
        };

        /**
         * Checks if auto-shortening is enabled and sends the link to the shortener if it is.
         *
         * @name  PasteStatus.checkAutoShorten
         * @function
         */
        me.checkAutoShorten = function () {
            // check if auto-shortening is enabled
            if (shortenButton && shortenButton.dataset.autoshorten === 'true') {
                // if so, we send the link to the shortener
                // we do not remove the button, in case shortener fails
                sendToShortener();
            }
        };

        /**
         * extracts URLs from given string
         *
         * if at least one is found, it disables the shortener button and
         * replaces the document URL
         *
         * @name   PasteStatus.extractUrl
         * @function
         * @param  {string} response
         */
        me.extractUrl = function (response) {
            if (typeof response === 'object') {
                response = JSON.stringify(response);
            }
            if (typeof response === 'string' && response.length > 0) {
                const shortUrlMatcher = /https?:\/\/[^\s"<]+/g; // JSON API will have URL in quotes, XML in tags
                const shortUrl = (response.match(shortUrlMatcher) || []).filter(function (urlRegExMatch) {
                    if (typeof URL.canParse === 'function') {
                        return URL.canParse(urlRegExMatch);
                    }
                    // polyfill for older browsers (< 120) & node (< 19.9 & < 18.17)
                    try {
                        return !!new URL(urlRegExMatch);
                    } catch (error) {
                        return false;
                    }
                }).sort(function (a, b) {
                    return a.length - b.length; // shortest first
                })[0];
                if (typeof shortUrl === 'string' && shortUrl.length > 0) {
                    // we disable the button to avoid calling shortener again
                    if (shortenButton) {
                        shortenButton.classList.add('buttondisabled');
                    }
                    // update link
                    pasteUrl.textContent = shortUrl;
                    pasteUrl.href = shortUrl;
                    // we pre-select the link so that the user only has to [Ctrl]+[c] the link
                    Helper.selectText(pasteUrl);
                    CopyToClipboard.setUrl(shortUrl);
                    return;
                }
            }
            Alert.showError('Cannot parse response from URL shortener.');
        };

        /**
         * shows the remaining time
         *
         * @name PasteStatus.showRemainingTime
         * @function
         * @param {Paste} paste
         */
        me.showRemainingTime = function (paste) {
            if (paste.isBurnAfterReadingEnabled()) {
                // display document "for your eyes only" if it is deleted

                // the document has been deleted when the JSON with the ciphertext
                // has been downloaded

                Alert.showRemaining('FOR YOUR EYES ONLY. Don\'t close this window, this message can\'t be displayed again.');
                remainingTime.classList.add('foryoureyesonly');
            } else if (paste.getTimeToLive() > 0) {
                // display document expiration
                let expiration = Helper.secondsToHuman(paste.getTimeToLive()),
                    expirationLabel = [
                        'This document will expire in %d ' + expiration[1] + '.',
                        'This document will expire in %d ' + expiration[1] + 's.'
                    ];

                Alert.showRemaining([expirationLabel, expiration[0]]);
                remainingTime.classList.remove('foryoureyesonly');
            } else {
                // never expires
                return;
            }

            // in the end, display notification
            remainingTime.classList.remove('hidden');
        };

        /**
         * hides the remaining time and successful upload notification
         *
         * @name PasteStatus.hideMessages
         * @function
         */
        me.hideMessages = function () {
            remainingTime.classList.add('hidden');
            pasteSuccess.classList.add('hidden');
        };

        /**
         * init status manager
         *
         * preloads HTMLElements
         *
         * @name   PasteStatus.init
         * @function
         */
        me.init = function () {
            pasteSuccess = document.getElementById('pastesuccess');
            // pasteUrl is saved in me.createPasteNotification() after creation
            remainingTime = document.getElementById('remainingtime');
            shortenButton = document.getElementById('shortenbutton');

            // bind elements
            if (shortenButton) {
                shortenButton.addEventListener('click', sendToShortener);
            }
        };

        return me;
    })();

    /**
     * password prompt
     *
     * @name Prompt
     * @class
     */
    const Prompt = (function () {
        const me = {};

        let passwordDecrypt,
            passwordModal,
            bootstrap5PasswordModal = null,
            password = '';

        /**
         * submit a password in the modal dialog
         *
         * @name Prompt.submitPasswordModal
         * @private
         * @function
         * @param  {Event} event
         */
        function submitPasswordModal(event) {
            event.preventDefault();

            // get input
            password = passwordDecrypt.value;

            // hide modal
            if (bootstrap5PasswordModal) {
                bootstrap5PasswordModal.hide();
            } else {
                if (passwordModal) {
                    passwordModal.classList.remove('show');
                    passwordModal.style.display = 'none';
                }
            }

            PasteDecrypter.run();
        }

        /**
         * Request users confirmation to load possibly burn after reading document
         *
         * @name   Prompt.requestLoadConfirmation
         * @function
         */
        me.requestLoadConfirmation = function () {
            const loadconfirmmodal = document.getElementById('loadconfirmmodal');

            const loadconfirmOpenNow = loadconfirmmodal.querySelector('#loadconfirm-open-now');
            loadconfirmOpenNow.removeEventListener('click', PasteDecrypter.run);
            loadconfirmOpenNow.addEventListener('click', PasteDecrypter.run);

            const loadconfirmClose = loadconfirmmodal.querySelector('.btn-close');
            loadconfirmClose.removeEventListener('click', Controller.newPaste);
            loadconfirmClose.addEventListener('click', Controller.newPaste);

            loadconfirmmodal.addEventListener('shown.bs.modal', () => {
                loadconfirmOpenNow.focus();
            });

            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip && typeof bootstrap.Modal === 'function') {
                (new bootstrap.Modal(loadconfirmmodal)).show();
            } else {
                // minimal fallback: make element visible
                loadconfirmmodal.classList.add('show');
            }
        };

        /**
         * ask the user for the password and set it
         *
         * @name Prompt.requestPassword
         * @function
         */
        me.requestPassword = function () {
            // show new bootstrap method (if available)
            if (passwordModal !== null) {
                if (bootstrap5PasswordModal) {
                    bootstrap5PasswordModal.show();
                }
                return;
            }

            PasteDecrypter.run();
        };

        /**
         * get the cached password
         *
         * If you do not get a password with this function
         * (returns an empty string), use requestPassword.
         *
         * @name   Prompt.getPassword
         * @function
         * @return {string}
         */
        me.getPassword = function () {
            return password;
        };

        /**
         * resets the password to an empty string
         *
         * @name   Prompt.reset
         * @function
         */
        me.reset = function () {
            // reset internal
            password = '';

            // and also reset UI
            passwordDecrypt.value = '';
        };

        /**
         * init status manager
         *
         * preloads HTMLElements
         *
         * @name   Prompt.init
         * @function
         */
        me.init = function () {
            passwordDecrypt = document.getElementById('passworddecrypt');
            passwordModal = document.getElementById('passwordmodal');

            // bind events - handle Model password submission
            if (passwordModal) {
                const passwordForm = document.getElementById('passwordform');
                if (passwordForm) {
                    passwordForm.addEventListener('submit', submitPasswordModal);
                }

                const disableClosingConfig = {
                    backdrop: 'static',
                    keyboard: false,
                    show: false
                };
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip && typeof bootstrap.Modal === 'function') {
                    bootstrap5PasswordModal = new bootstrap.Modal(passwordModal, disableClosingConfig);
                } else {
                    // fallback: keep modal hidden until explicitly shown
                    passwordModal.style.display = 'none';
                }

                // ensure focus when modal shown (works for bootstrap5)
                passwordModal.addEventListener('shown.bs.modal', () => {
                    passwordDecrypt.focus();
                });
            }
        };

        return me;
    })();

    /**
     * Manage paste/message input, and preview tab
     *
     * Note that the actual preview is handled by PasteViewer.
     *
     * @name   Editor
     * @class
     */
    const Editor = (function () {
        const me = {};

        let editorTabs,
            messageEdit,
            messageEditParent,
            messagePreview,
            messagePreviewParent,
            messageTab,
            messageTabParent,
            message,
            isPreview = false,
            isTabSupported = true;

        /**
         * support input of tab character
         *
         * @name   Editor.supportTabs
         * @function
         * @param  {KeyboardEvent} event
         * @this message
         */
        function supportTabs(event) {
            // support disabling tab support using [Esc] and [Ctrl]+[m]
            if (event.key === 'Escape' || (event.ctrlKey && event.key === 'm')) {
                toggleTabSupport();
                if (messageTab) messageTab.checked = isTabSupported;
                event.preventDefault();
            }
            else if (isTabSupported && event.key === 'Tab') {
                // get caret position & selection
                const val = this.value,
                    start = this.selectionStart,
                    end = this.selectionEnd;
                // set textarea value to: text before caret + tab + text after caret
                this.value = val.substring(0, start) + '\t' + val.substring(end);
                // put caret at right position again
                this.selectionStart = this.selectionEnd = start + 1;
                // prevent the textarea to lose focus
                event.preventDefault();
            }
        }

        /**
         * toggle tab support in message textarea
         *
         * @name   Editor.toggleTabSupport
         * @private
         * @function
         */
        function toggleTabSupport() {
            isTabSupported = !isTabSupported;
        }

        /**
         * view the Editor tab
         *
         * @name   Editor.viewEditor
         * @function
         * @param  {Event} event - optional
         */
        function viewEditor(event) {
            // toggle buttons
            messageEdit.classList.add('active');
            messageEditParent.classList.add('active');
            messagePreview.classList.remove('active');
            messagePreviewParent.classList.remove('active');

            messageEdit.setAttribute('aria-selected', 'true');
            messagePreview.setAttribute('aria-selected', 'false');

            PasteViewer.hide();

            // reshow input
            message.classList.remove('hidden');
            messageTabParent.classList.remove('hidden');

            me.focusInput();

            // finish
            isPreview = false;

            // prevent jumping of page to top
            if (typeof event !== 'undefined') {
                event.preventDefault();
            }
        }

        /**
         * view the preview tab
         *
         * @name   Editor.viewPreview
         * @function
         * @param  {Event} event
         */
        function viewPreview(event) {
            // toggle buttons
            messageEdit.classList.remove('active');
            messageEditParent.classList.remove('active');
            messagePreview.classList.add('active');
            messagePreviewParent.classList.add('active');

            messageEdit.setAttribute('aria-selected', 'false');
            messagePreview.setAttribute('aria-selected', 'true');

            // hide input as now preview is shown
            message.classList.add('hidden');
            messageTabParent.classList.add('hidden');

            // show preview
            PasteViewer.setText(message.value);
            if (AttachmentViewer.hasAttachmentData()) {
                const attachmentsData = AttachmentViewer.getAttachmentsData();

                attachmentsData.forEach(attachmentData => {
                    const mimeType = AttachmentViewer.getAttachmentMimeType(attachmentData);

                    AttachmentViewer.handleBlobAttachmentPreview(
                        AttachmentViewer.getAttachmentPreview(),
                        attachmentData, mimeType
                    );
                });

                AttachmentViewer.showAttachment();
            }
            PasteViewer.run();

            // finish
            isPreview = true;

            // prevent jumping of page to top
            if (typeof event !== 'undefined') {
                event.preventDefault();
            }
        }

        /**
         * get the state of the preview
         *
         * @name   Editor.isPreview
         * @function
         */
        me.isPreview = function () {
            return isPreview;
        };

        /**
         * reset the Editor view
         *
         * @name   Editor.resetInput
         * @function
         */
        me.resetInput = function () {
            // go back to input
            if (isPreview) {
                viewEditor();
            }

            // clear content
            message.value = '';
        };

        /**
         * shows the Editor
         *
         * @name   Editor.show
         * @function
         */
        me.show = function () {
            message.classList.remove('hidden');
            messageTabParent.classList.remove('hidden');
            editorTabs.classList.remove('hidden');
        };

        /**
         * hides the Editor
         *
         * @name   Editor.hide
         * @function
         */
        me.hide = function () {
            message.classList.add('hidden');
            messageTabParent.classList.add('hidden');
            editorTabs.classList.add('hidden');
        };

        /**
         * focuses the message input
         *
         * @name   Editor.focusInput
         * @function
         */
        me.focusInput = function () {
            message.focus();
        };

        /**
         * sets a new text
         *
         * @name   Editor.setText
         * @function
         * @param {string} newText
         */
        me.setText = function (newText) {
            message.value = newText;
        };

        /**
         * returns the current text
         *
         * @name   Editor.getText
         * @function
         * @return {string}
         */
        me.getText = function () {
            return message.value;
        };

        /**
         * init editor
         *
         * preloads HTMLElements and binds events
         *
         * @name   Editor.init
         * @function
         */
        me.init = function () {
            editorTabs = document.getElementById('editorTabs');
            message = document.getElementById('message');
            messageTab = document.getElementById('messagetab');
            messageTabParent = messageTab ? messageTab.parentElement : null;

            // bind events
            if (message) {
                message.addEventListener('keydown', supportTabs);
            }
            if (messageTab) {
                messageTab.addEventListener('change', toggleTabSupport);
            }

            // bind click events to tab switchers (a), and save parents (li)
            messageEdit = document.getElementById('messageedit');
            if (messageEdit) {
                messageEdit.addEventListener('click', viewEditor);
                messageEditParent = messageEdit.parentElement;
            }
            messagePreview = document.getElementById('messagepreview');
            if (messagePreview) {
                messagePreview.addEventListener('click', viewPreview);
                messagePreviewParent = messagePreview.parentElement;
            }
        };

        return me;
    })();

    /**
     * (view) Parse and show document.
     *
     * @name   PasteViewer
     * @class
     */
    const PasteViewer = (function () {
        const me = {};

        let messageTabParent,
            placeholder,
            prettyMessage,
            prettyPrintEl,
            plainText,
            text,
            format = 'plaintext',
            isDisplayed = false,
            isChanged = true; // by default true as nothing was parsed yet

        /**
         * apply the set format on paste and displays it
         *
         * @name   PasteViewer.parsePaste
         * @private
         * @function
         */
        function parsePaste() {
            // skip parsing if no text is given
            if (text === '') {
                return;
            }

            if (format === 'markdown') {
                const converter = new showdown.Converter({
                    strikethrough: true,
                    tables: true,
                    tablesHeaderId: true,
                    simplifiedAutoLink: true,
                    excludeTrailingPunctuationFromURLs: true
                });
                // let showdown convert the HTML and sanitize HTML *afterwards*!
                if (plainText) {
                    plainText.innerHTML = DOMPurify.sanitize(
                        converter.makeHtml(text),
                        purifyHtmlConfig
                    );
                    // add table classes from bootstrap css
                    plainText.querySelectorAll('table').forEach(t => {
                        t.classList.add('table-condensed', 'table-bordered');
                    });
                }
            } else {
                if (format === 'syntaxhighlighting') {
                    // yes, this is really needed to initialize the environment
                    if (typeof prettyPrint === 'function') {
                        prettyPrint();
                    }

                    if (prettyPrintEl) {
                        prettyPrintEl.innerHTML = prettyPrintOne(
                            Helper.htmlEntities(text), null, true
                        );
                    }
                } else {
                    // = 'plaintext'
                    if (prettyPrintEl) {
                        prettyPrintEl.textContent = text;
                    }
                }
                if (prettyPrintEl) {
                    Helper.urls2links(prettyPrintEl, format !== 'syntaxhighlighting');
                    prettyPrintEl.style.whiteSpace = 'pre-wrap';
                    prettyPrintEl.style.wordBreak = 'normal';
                    prettyPrintEl.classList.remove('prettyprint', 'prettyprinted');
                }
            }
        }

        /**
         * displays the document
         *
         * NOTE: FOr some obscure reaosn, Markdown is shown in the "plaintext" class
         * and all other ones are rendered in the "prettyPrintEl" one.
         *
         * @name   PasteViewer.showPaste
         * @private
         * @function
         */
        function showPaste() {
            // instead of "nothing" better display a placeholder
            if (text === '') {
                if (placeholder) placeholder.classList.remove('hidden');
                return;
            }
            // otherwise hide the placeholder
            if (placeholder) placeholder.classList.add('hidden');
            if (messageTabParent) messageTabParent.classList.add('hidden');

            if (format === 'markdown') {
                if (plainText) plainText.classList.remove('hidden');
                if (prettyMessage) prettyMessage.classList.add('hidden');
            } else {
                if (plainText) plainText.classList.add('hidden');
                if (prettyMessage) prettyMessage.classList.remove('hidden');
            }
        }

        /**
         * sets the format in which the text is shown
         *
         * @name   PasteViewer.setFormat
         * @function
         * @param {string} newFormat the new format
         */
        me.setFormat = function (newFormat) {
            // skip if there is no update
            if (format === newFormat) {
                return;
            }

            // needs to update display too, if we switch from or to Markdown
            if (format === 'markdown' || newFormat === 'markdown') {
                isDisplayed = false;
            }

            format = newFormat;
            isChanged = true;

            // update preview
            if (Editor.isPreview()) {
                PasteViewer.run();
            }
        };

        /**
         * returns the current format
         *
         * @name   PasteViewer.getFormat
         * @function
         * @return {string}
         */
        me.getFormat = function () {
            return format;
        };

        /**
         * returns whether the current view is pretty printed
         *
         * @name   PasteViewer.isPrettyPrinted
         * @function
         * @return {bool}
         */
        me.isPrettyPrinted = function () {
            return prettyPrintEl ? prettyPrintEl.classList.contains('prettyprinted') : false;
        };

        /**
         * sets the text to show
         *
         * @name   PasteViewer.setText
         * @function
         * @param {string} newText the text to show
         */
        me.setText = function (newText) {
            if (text !== newText) {
                text = newText;
                isChanged = true;
            }
        };

        /**
         * gets the current cached text
         *
         * @name   PasteViewer.getText
         * @function
         * @return {string}
         */
        me.getText = function () {
            return text;
        };

        /**
         * show/update the parsed text (preview)
         *
         * @name   PasteViewer.run
         * @function
         */
        me.run = function () {
            if (isChanged) {
                parsePaste();
                isChanged = false;
            }

            if (!isDisplayed) {
                showPaste();
                isDisplayed = true;
            }
        };

        /**
         * hide parsed text (preview)
         *
         * @name   PasteViewer.hide
         * @function
         */
        me.hide = function () {
            if (!isDisplayed) {
                return;
            }

            if (plainText) plainText.classList.add('hidden');
            if (prettyMessage) prettyMessage.classList.add('hidden');
            if (placeholder) placeholder.classList.add('hidden');
            AttachmentViewer.hideAttachmentPreview();

            isDisplayed = false;
        };

        /**
         * init status manager
         *
         * preloads DOM elements
         *
         * @name   PasteViewer.init
         * @function
         */
        me.init = function () {
            const messagetab = document.getElementById('messagetab');
            messageTabParent = messagetab ? messagetab.parentElement : null;
            placeholder = document.getElementById('placeholder');
            plainText = document.getElementById('plaintext');
            prettyMessage = document.getElementById('prettymessage');
            prettyPrintEl = document.getElementById('prettyprint');

            // get default option from template/HTML or fall back to set value
            format = Model.getFormatDefault() || format;
            text = '';
            isDisplayed = false;
            isChanged = true;
        };

        return me;
    })();

    /**
     * (view) Show attachment and preview if possible
     *
     * @name   AttachmentViewer
     * @class
     */
    const AttachmentViewer = (function () {
        const me = {};

        let attachmentPreview,
            attachment,
            attachmentsData = [],
            files,
            fileInput,
            dragAndDropFileNames,
            dropzone;

        /**
         * get blob URL from string data and mime type
         *
         * @name   AttachmentViewer.getBlobUrl
         * @private
         * @function
         * @param {string} data - raw data of attachment
         * @param {string} data - mime type of attachment
         * @return {string} objectURL
         */
        function getBlobUrl(data, mimeType) {
            // Transform into a Blob
            const buf = Uint8Array.from(
                data,
                character => character.charCodeAt(0)
            );
            const blob = new window.Blob(
                [buf],
                {
                    type: mimeType
                }
            );

            // Get blob URL
            return window.URL.createObjectURL(blob);
        }

        /**
        * sets the attachment but does not yet show it
        *
        * @name   AttachmentViewer.setAttachment
        * @function
        * @param {string} attachmentData - base64-encoded data of file
        * @param {string} fileName - optional, file name
        */
        me.setAttachment = function (attachmentData, fileName) {
            // skip, if attachments got disabled
            if (!attachment) return;

            // data URI format: data:[<mimeType>][;base64],<data>

            const template = Model.getTemplate('attachment');
            const attachmentLink = template.querySelector('a');

            // position in data URI string of where data begins
            const base64Start = attachmentData.indexOf(',') + 1;

            const mimeType = me.getAttachmentMimeType(attachmentData);

            // We explicitly do _not_ use the original mime type for the download link
            // to always force a download instead of potentially dangerous browser rendering/parsing/interpretation
            let sanitizedMimeType = 'application/octet-stream';
            if (me.isSafeMimeType(mimeType)) {
                sanitizedMimeType = mimeType;
            }

            // extract data and convert to binary
            const base64Data = attachmentData.substring(base64Start);
            const plainData = base64Data.length > 0 ? atob(base64Data) : '';

            let blobUrl = getBlobUrl(plainData, sanitizedMimeType);
            attachmentLink.setAttribute('href', blobUrl);

            if (typeof fileName !== 'undefined') {
                attachmentLink.setAttribute('download', fileName);

                const fileSize = Helper.formatBytes(plainData.length);
                const spans = template.querySelectorAll('span');
                const span = spans[spans.length - 1];
                span.textContent += ` (${fileName}, ${fileSize})`;
            }

            // sanitize SVG preview
            // prevents executing embedded scripts when CSP is not set and user
            // right-clicks/long-taps and opens the SVG in a new tab - prevented
            // in the preview by use of an img tag, which disables scripts, too
            if (mimeType.startsWith('image/svg')) {
                try {
                    // attempt to UTF-8 decode the SVG data
                    const svgBuffer = Uint8Array.from(
                        plainData,
                        character => character.charCodeAt(0)
                    );
                    const utf8ValidatedSvgString = new TextDecoder(
                        'utf-8',
                        {fatal: true}
                    ).decode(svgBuffer);
                    const sanitizedData = DOMPurify.sanitize(
                        utf8ValidatedSvgString,
                        purifySvgConfig
                    );
                    sanitizedMimeType = 'image/svg+xml';
                    blobUrl = getBlobUrl(sanitizedData, sanitizedMimeType);
                } catch (e) {
                    // Invalid or non-UTF-8 SVG: download only, no preview as it
                    // may be used to smuggle multi-byte sequences past DOMpurify
                    // such as `&#x13c` to get `\x01<` & `&#x13e` to get `\x01>`
                    sanitizedMimeType = 'application/octet-stream';
                    blobUrl = getBlobUrl(plainData, sanitizedMimeType);
                }
            }

            template.classList.remove('hidden');
            attachment.appendChild(template);

            me.handleBlobAttachmentPreview(attachmentPreview, blobUrl, sanitizedMimeType);
        };



        /**
         * Evaluates whether this is known a safe mime type.
         *
         * This means, the media can safely be displayed and e.g. no XSS should be possible.
         *
         * @name AttachmentViewer.isSafeMimeType
         * @function
         * @param {string}
         * @returns {bool}
         */
        me.isSafeMimeType = function(mimeType) {
            return ((
                    mimeType.startsWith('image/') &&
                    !/svg/i.test(mimeType)
                ) ||
                mimeType.startsWith('video/') ||
                mimeType.startsWith('audio/') ||
                mimeType === 'application/pdf' ||
                mimeType === 'text/plain') &&
                // don't accept comments, stray characters, spaces, etc.
                /^[a-z0-9][a-z0-9.-]*[a-z0-9]\/[a-z0-9][a-z0-9.+-]*[a-z0-9]$/.test(mimeType);
        };

        /**
         * displays the attachment and (if possible) the preview
         *
         * @name AttachmentViewer.showAttachment
         * @function
         */
        me.showAttachment = function () {
            if (!attachment) {
                return;
            }

            attachment.classList.remove('hidden');

            if (attachmentPreview && me.hasAttachmentPreview()) {
                attachmentPreview.classList.remove('hidden');
            }
        };

        /**
         * removes the attachment
         *
         * This automatically hides the attachment containers too, to
         * prevent an inconsistent display.
         *
         * @name AttachmentViewer.removeAttachment
         * @function
         */
        me.removeAttachment = function () {
            if (!attachment) {
                return;
            }
            me.hideAttachment();
            me.hideAttachmentPreview();
            attachment.innerHTML = '';
            if (attachmentPreview) {
                attachmentPreview.innerHTML = '';
            }
            me.clearDragAndDrop();

            AttachmentViewer.removeAttachmentData();
        };

        /**
         * removes the attachment data
         *
         * This removes the data, which would be uploaded otherwise.
         *
         * @name AttachmentViewer.removeAttachmentData
         * @function
         */
        me.removeAttachmentData = function () {
            files = [];
            attachmentsData = [];
        };

        /**
         * Cleares the drag & drop data.
         *
         * @name AttachmentViewer.clearDragAndDrop
         * @function
         */
        me.clearDragAndDrop = function () {
            if (dragAndDropFileNames) {
                dragAndDropFileNames.innerHTML = '';
            }
        };

        /**
         * Print file names added via drag & drop
         *
         * @name AttachmentViewer.printDragAndDropFileNames
         * @private
         * @function
         * @param {string[]} fileNames
         */
        function printDragAndDropFileNames(fileNames) {
            me.clearDragAndDrop();
            fileNames.forEach(fileName => {
                const name = document.createTextNode(fileName);
                dragAndDropFileNames.appendChild(name);
                dragAndDropFileNames.appendChild(document.createElement('br'));
            });
        }

        /**
         * hides the attachment
         *
         * This will not hide the preview (see {@see AttachmentViewer.hideAttachmentPreview}
         * for that) nor will it hide the attachment link if it was moved somewhere
         * else (see {@see AttachmentViewer.moveAttachmentTo}).
         *
         * @name AttachmentViewer.hideAttachment
         * @function
         */
        me.hideAttachment = function () {
            attachment.classList.add('hidden');
        };

        /**
         * hides the attachment preview
         *
         * @name AttachmentViewer.hideAttachmentPreview
         * @function
         */
        me.hideAttachmentPreview = function () {
            if (attachmentPreview) {
                attachmentPreview.classList.add('hidden');
            }
        };

        /**
         * checks if has any attachment preview that is currently rendered
         *
         * Note: This does not verify if the attachment preview is actually shown to the user, as it might be hidden ({@see AttachmentViewer.hideAttachmentPreview}).
         *
         * @name AttachmentViewer.hasAttachmentPreview
         * @function
         * @return {boolean}
         */
        me.hasAttachmentPreview = function () {
            return attachmentPreview.children.length > 0;
        };

        /**
         * checks if there is an attachment displayed
         *
         * @name   AttachmentViewer.hasAttachment
         * @function
         */
        me.hasAttachment = function () {
            if (!attachment) {
                return false;
            }

            // Check if there are actual attachment data items (not just UI elements)
            if (attachmentsData.length > 0) {
                return true;
            }
            // Also check UI elements in case data was removed but UI wasn't updated
            return attachment.children.length > 0;
        };

        /**
         * checks if there is attachment data (for preview!) available
         *
         * It returns true, when there is data that needs to be encrypted.
         *
         * @name   AttachmentViewer.hasAttachmentData
         * @function
         */
        me.hasAttachmentData = function()
        {
            // Check if there are actual attachment data items (not just UI elements)
            return attachmentsData.length > 0;
        };

        /**
         * return the attachments
         *
         * @name   AttachmentViewer.getAttachments
         * @function
         * @returns {array}
         */
        me.getAttachments = function () {
            return [...attachment.querySelectorAll('a')].map(link => (
                [
                    link.href,
                    link.download
                ]
            ));
        };

        /**
         * Get attachment mime type
         *
         * @name AttachmentViewer.getAttachmentMimeType
         * @function
         * @param {string} attachmentData - Base64 string
         */
        me.getAttachmentMimeType = function (attachmentData) {
            // position in data URI string of where mimeType ends
            const mimeTypeEnd = attachmentData.indexOf(';');
            if (mimeTypeEnd < 6) {
                return '';
            }

            // extract mimeType
            return attachmentData.substring(5, mimeTypeEnd).toLowerCase();
        };

        /**
         * moves the attachment link to another element
         *
         * It is advisable to hide the attachment afterwards (AttachmentViewer.hideAttachment)
         *
         * @name   AttachmentViewer.moveAttachmentTo
         * @function
         * @param {HTMLElement} element - the wrapper/container element where this should be moved to
         * @param {array} attachment - attachment data
         * @param {string} label - the text to show (%s will be replaced with the file name), will automatically be translated
         */
        me.moveAttachmentTo = function (element, attachment, label) {
            const attachmentLink = document.createElement('a');
            attachmentLink.className = 'alert-link';
            attachmentLink.href = attachment[0];
            attachmentLink.download = attachment[1];

            // move element to new place
            element.appendChild(attachmentLink);

            // update text - ensuring no HTML is inserted into the text node
            I18n._(attachmentLink, label, attachment[1]);
        };

        /**
         * read files data as data URL using the FileReader API
         *
         * @name   AttachmentViewer.readFileData
         * @private
         * @function
         * @param {FileList[]} loadedFiles (optional) loaded files array
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsDataURL()}
         */
        function readFileData(loadedFiles = []) {
            // Clear old cache
            me.removeAttachmentData();

            if (typeof FileReader === 'undefined') {
                // revert loading status…
                me.hideAttachment();
                me.hideAttachmentPreview();
                Alert.showWarning('Your browser does not support uploading encrypted files. Please use a newer browser.');
                return;
            }

            if (loadedFiles && loadedFiles.length > 0) {
                const fileNames = loadedFiles.map((loadedFile => loadedFile.name));
                printDragAndDropFileNames(fileNames);
            } else {
                const fileInput = document.getElementById('file');
                if (fileInput && fileInput.files) {
                    loadedFiles = [...fileInput.files];
                }
                me.clearDragAndDrop();
            }

            if (loadedFiles.length > 0) {
                files = loadedFiles;
                loadedFiles.forEach((loadedFile, index) => {
                    const fileReader = new FileReader();

                    fileReader.onload = function (event) {
                        const dataURL = event.target.result;
                        if (dataURL) {
                            attachmentsData[index] = dataURL;
                        }

                        if (Editor.isPreview()) {
                            me.handleAttachmentPreview(attachmentPreview, dataURL);
                            attachmentPreview.classList.remove('hidden');
                        }

                        TopNav.highlightFileupload();
                    };

                    fileReader.readAsDataURL(loadedFile);
                });
            } else {
                me.removeAttachmentData();
            }
        }

        /**
         * handle the preview of files decoded to blob that can either be an image, video, audio or pdf element
         *
         * @name   AttachmentViewer.handleBlobAttachmentPreview
         * @function
         * @argument {HTMLElement?} targetElement element where the preview should be appended
         * @argument {string} blobUrl as a blob URL
         * @argument {string} mimeType type
         */
        me.handleBlobAttachmentPreview = function (targetElement, blobUrl, mimeType) {
            if (!targetElement) {
                console.log('Attachment preview element not found/disabled, cannot show attachment preview.');
                return;
            }

            const alreadyIncludesCurrentAttachment = targetElement.querySelectorAll(`[src='${blobUrl}']`).length > 0;

            if (blobUrl && !alreadyIncludesCurrentAttachment) {
                if (mimeType.startsWith('image/')) {
                    const image = document.createElement('img');
                    image.setAttribute('src', blobUrl);
                    image.setAttribute('class', 'img-thumbnail');
                    targetElement.appendChild(image);
                } else if (mimeType.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.setAttribute('controls', 'true');
                    video.setAttribute('autoplay', 'true');
                    video.setAttribute('class', 'img-thumbnail');
                    const source = document.createElement('source');
                    source.setAttribute('type', mimeType);
                    source.setAttribute('src', blobUrl);
                    video.appendChild(source);
                    targetElement.appendChild(video);
                } else if (mimeType.startsWith('audio/')) {
                    const audio = document.createElement('audio');
                    audio.setAttribute('controls', 'true');
                    audio.setAttribute('autoplay', 'true');
                    const source = document.createElement('source');
                    source.setAttribute('type', mimeType);
                    source.setAttribute('src', blobUrl);
                    audio.appendChild(source);
                    targetElement.appendChild(audio);
                } else if (mimeType === 'application/pdf') {
                    const embed = document.createElement('embed');
                    embed.setAttribute('src', blobUrl);
                    embed.setAttribute('type', 'application/pdf');
                    embed.setAttribute('class', 'pdfPreview');
                    // Fallback for browsers, that don't support the vh unit
                    embed.style.height = window.innerHeight + 'px';
                    targetElement.appendChild(embed);
                }
            }
        };

        /**
         * attaches the file attachment drag & drop handler to the page
         *
         * @name   AttachmentViewer.addDragDropHandler
         * @private
         * @function
         */
        function addDragDropHandler() {
            if (typeof fileInput === 'undefined' || fileInput === null) {
                return;
            }

            const handleDragEnterOrOver = function (event) {
                event.stopPropagation();
                event.preventDefault();
                return false;
            };

            const handleDrop = function (event) {
                event.stopPropagation();
                event.preventDefault();

                if (TopNav.isAttachmentReadonly()) {
                    return false;
                }

                if (fileInput) {
                    const files = [...event.dataTransfer.files];
                    //Clear the file input:
                    fileInput.value = '';
                    //Only works in Chrome:
                    //fileInput.files = event.dataTransfer.files;

                    readFileData(files);
                }
            };

            draghover(document);
            document.addEventListener('draghoverstart', function (e) {
                if (TopNav.isAttachmentReadonly()) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                }
                // show dropzone to indicate drop support
                dropzone.classList.remove('hidden');
            });
            document.addEventListener('draghoverend', function () {
                dropzone.classList.add('hidden');
            });

            document.addEventListener('drop', handleDrop);
            document.addEventListener('dragenter', handleDragEnterOrOver);
            document.addEventListener('dragover', handleDragEnterOrOver);

            fileInput.addEventListener('change', function () {
                readFileData();
            });
        }

        /**
         * attaches the clipboard attachment handler to the page
         *
         * @name   AttachmentViewer.addClipboardEventHandler
         * @private
         * @function
         */
        function addClipboardEventHandler() {
            document.addEventListener('paste', (event) => {
                const items = (event.clipboardData || event.originalEvent.clipboardData).items;
                const files = [...items]
                    .filter(item => item.kind === 'file')
                    .map(item => item.getAsFile());

                if (TopNav.isAttachmentReadonly() && files.length) {
                    event.stopPropagation();
                    event.preventDefault();
                    return false;
                }

                if (files.length) {
                    readFileData(files);
                }
            });
        }


        /**
         * getter for attachment data
         *
         * @name   AttachmentViewer.getAttachmentsData
         * @function
         * @return {string[]}
         */
        me.getAttachmentsData = function () {
            return attachmentsData;
        };

        /**
         * getter for attachment preview
         *
         * @name   AttachmentViewer.getAttachmentPreview
         * @function
         * @return {HTMLElement}
         */
        me.getAttachmentPreview = function () {
            return attachmentPreview;
        };

        /**
         * getter for files data, returns the file list
         *
         * @name   AttachmentViewer.getFiles
         * @function
         * @return {FileList[]}
         */
        me.getFiles = function () {
            return files;
        };

        /**
         * initiate
         *
         * preloads HTMLElements
         *
         * @name   AttachmentViewer.init
         * @function
         */
        me.init = function () {
            attachment = document.getElementById('attachment');
            dragAndDropFileNames = document.getElementById('dragAndDropFileName');
            dropzone = document.getElementById('dropzone');
            if (attachment) {
                attachmentPreview = document.getElementById('attachmentPreview');

                fileInput = document.getElementById('file');
                addDragDropHandler();
                addClipboardEventHandler();
            }
        };

        return me;
    })();

    /**
     * (view) Shows discussion thread and handles replies
     *
     * @name   DiscussionViewer
     * @class
     */
    const DiscussionViewer = (function () {
        const me = {};

        let commentTail,
            discussion,
            reply,
            replyMessage,
            replyNickname,
            replyStatus,
            commentContainer,
            replyCommentId;

        /**
         * initializes the templates
         *
         * @name   DiscussionViewer.initTemplates
         * @private
         * @function
         */
        function initTemplates() {
            reply = Model.getTemplate('reply');
            replyMessage = reply.querySelector('#replymessage');
            replyNickname = reply.querySelector('#nickname');
            replyStatus = reply.querySelector('#replystatus');

            // cache elements
            commentTail = Model.getTemplate('commenttail');

            const replyButton = reply.querySelector('#replybutton');
            if (replyButton) {
                replyButton.addEventListener('click', PasteEncrypter.sendComment);
            }

            addEventListeners();
        }

        /**
         * open the comment entry when clicking the "Reply" button of a comment
         *
         * @name   DiscussionViewer.openReply
         * @private
         * @function
         * @param  {Event} event
         */
        function openReply(event) {
            const source = event.currentTarget || event.target;

            // show all reply buttons
            commentContainer.querySelectorAll('button').forEach(btn => btn.classList.remove('hidden'));

            // hide the current reply button
            source.classList.add('hidden');

            // clear input
            replyMessage.value = '';
            replyNickname.value = '';

            // get comment id from source element
            replyCommentId = source.parentElement.id.split('_')[1];

            // move to correct position
            const parent = source.parentNode;
            if (parent && !reply.contains(source)) {
                if (typeof source.after === 'function') {
                    source.after(reply);
                } else if (source.nextSibling) {
                    parent.insertBefore(reply, source.nextSibling);
                } else {
                    parent.appendChild(reply);
                }
            }

            // show
            reply.classList.remove('hidden');
            replyMessage.focus();

            event.preventDefault();
        }

        /**
         * custom handler for displaying notifications in own status message area
         *
         * @name   DiscussionViewer.handleNotification
         * @function
         * @param  {string} alertType
         * @return {Boolean|HTMLElement}
         */
        me.handleNotification = function (alertType) {
            // ignore loading messages
            if (alertType === 'loading') {
                return false;
            }

            if (alertType === 'danger') {
                replyStatus.classList.remove('alert-info');
                replyStatus.classList.add('alert-danger');
                const replyIcon = replyStatus.querySelector(':first-child');
                if (replyIcon) {
                    replyIcon.classList.remove('glyphicon-alert');
                    replyIcon.classList.add('glyphicon-info-sign');
                }
            } else {
                replyStatus.classList.remove('alert-danger');
                replyStatus.classList.add('alert-info');
                const replyIcon = replyStatus.querySelector(':first-child');
                if (replyIcon) {
                    replyIcon.classList.remove('glyphicon-info-sign');
                    replyIcon.classList.add('glyphicon-alert');
                }
            }

            return replyStatus;
        };

        /**
         * adds another comment
         *
         * @name   DiscussionViewer.addComment
         * @function
         * @param {Comment} comment
         * @param {string} commentText
         * @param {string} nickname
         */
        me.addComment = function (comment, commentText, nickname) {
            if (commentText === '') {
                commentText = 'comment decryption failed';
            }

            // create new comment based on template
            const commentEntry = Model.getTemplate('comment');
            if (!commentEntry) {
                return;
            }
            commentEntry.id = 'comment_' + comment.id;
            const commentEntryData = commentEntry.querySelector('div.commentdata');
            if (!commentEntryData) {
                return;
            }

            // set & parse text
            commentEntryData.textContent = commentText;
            Helper.urls2links(commentEntryData);

            // set nickname
            if (nickname.length > 0) {
                const nicknameElement = commentEntry.querySelector('span.nickname');
                if (nicknameElement) {
                    nicknameElement.textContent = nickname;
                }
            } else {
                const anonCommenter = document.createElement('em');
                anonCommenter.textContent = I18n._('Anonymous');
                const nicknameElement = commentEntry.querySelector('span.nickname');
                if (nicknameElement) {
                    nicknameElement.innerHTML = '';
                    nicknameElement.appendChild(anonCommenter);
                }
            }

            // set date
            const created = comment.getCreated();
            const commentDate = created === 0 ? '' : ' (' + (new Date(created * 1000).toLocaleString()) + ')';
            const dateSpan = commentEntry.querySelector('span.commentdate');
            if (dateSpan) {
                dateSpan.textContent = commentDate;
                dateSpan.setAttribute('title', 'CommentID: ' + comment.id);
            }

            // if an avatar is available, display it
            const icon = comment.getIcon();
            if (icon) {
                const iconTitle = 'Avatar generated from IP address';
                const image = document.createElement('img');
                // Set the title immediately with the current translation. If
                // the language has not been loaded yet, this will fall back to
                // English, so we also register a callback to re-apply the
                // translation once available. To avoid a race condition, we
                // register the callback first, then translate - if the language
                // loads between the two lines, both will set the translated text.
                I18n.onLanguageLoaded(function () {
                    image.setAttribute('title', I18n._(iconTitle));
                });
                image.setAttribute('title', I18n._(iconTitle));
                image.setAttribute('src', icon);
                image.setAttribute('class', 'vizhash');
                const nickSpan = commentEntry.querySelector('span.nickname');
                if (nickSpan) {
                    nickSpan.prepend(' ');
                    nickSpan.prepend(image);
                }
            }

            // starting point (default value/fallback)
            let place = commentContainer;

            // if parent comment exists
            const parentComment = document.getElementById('comment_' + comment.parentid);
            if (parentComment) {
                // use parent as position for new comment, so it is shifted
                // to the right
                place = parentComment;
            }

            // attach button handler before inserting
            const replyButton = commentEntry.querySelector('button');
            if (replyButton) {
                replyButton.addEventListener('click', openReply);
            }

            // finally append comment
            place.appendChild(commentEntry);
        };

        /**
         * finishes the discussion area after last comment
         *
         * @name   DiscussionViewer.finishDiscussion
         * @function
         */
        me.finishDiscussion = function () {
            // add 'add new comment' area
            const tail = commentTail.cloneNode(true);
            const tailButton = tail.querySelector('button');
            if (tailButton) {
                tailButton.addEventListener('click', openReply);
            }
            commentContainer.appendChild(tail);

            // show discussions
            discussion.classList.remove('hidden');
        };

        /**
         * removes the old discussion and prepares everything for creating a new
         * one.
         *
         * @name   DiscussionViewer.prepareNewDiscussion
         * @function
         */
        me.prepareNewDiscussion = function () {
            commentContainer.innerHTML = '';
            discussion.classList.add('hidden');

            // (re-)init templates
            initTemplates();
        };

        /**
         * returns the users message from the reply form
         *
         * @name   DiscussionViewer.getReplyMessage
         * @function
         * @return {String}
         */
        me.getReplyMessage = function () {
            return replyMessage.value;
        };

        /**
         * returns the users nickname (if any) from the reply form
         *
         * @name   DiscussionViewer.getReplyNickname
         * @function
         * @return {String}
         */
        me.getReplyNickname = function () {
            return replyNickname.value;
        };

        /**
         * returns the id of the parent comment the user is replying to
         *
         * @name   DiscussionViewer.getReplyCommentId
         * @function
         * @return {number|undefined}
         */
        me.getReplyCommentId = function () {
            return replyCommentId;
        };

        /**
         * highlights a specific comment and scrolls to it if necessary
         *
         * @name   DiscussionViewer.highlightComment
         * @function
         * @param {string} commentId
         * @param {Boolean} fadeOut - whether to fade out the comment
         */
        me.highlightComment = function (commentId, fadeOut) {
            const comment = document.getElementById('comment_' + commentId);
            // in case comment does not exist, cancel
            if (!comment) {
                return;
            }

            comment.classList.add('highlight');
            if (fadeOut === true) {
                setTimeout(function () {
                    comment.classList.remove('highlight');
                }, 300);
            }

            if (('checkVisibility' in comment ? comment.checkVisibility() : comment.offsetParent !== null) === false) {
                if (typeof comment.scrollIntoView === 'function') {
                    comment.scrollIntoView({ block: 'center' });
                }
            }
        };

        /**
         * Binds events to templates (**and** all )
         */
        function addEventListeners() {
            //
            document.querySelectorAll('#commenttail button')
                .forEach(btn => btn.addEventListener('click', openReply));

            document.querySelectorAll('#comment button')
                .forEach(btn => btn.addEventListener('click', openReply));
        }

        /**
         * initiate
         *
         * preloads HTML elements
         *
         * @name   DiscussionViewer.init
         * @function
         */
        me.init = function () {
           // todo: remove
            addEventListeners();

            commentContainer = document.getElementById('commentcontainer');
            discussion = document.getElementById('discussion');
        };

        return me;
    })();

    /**
     * Manage top (navigation) bar
     *
     * @name   TopNav
     * @param  {object} window
     * @param  {object} document
     * @class
     */
    const TopNav = (function (window, document) {
        const me = {};

        let createButtonsDisplayed = false,
            viewButtonsDisplayed = false,
            burnAfterReadingDefault = false,
            openDiscussionDefault = false,
            attach,
            burnAfterReading,
            burnAfterReadingOption,
            cloneButton,
            customAttachment,
            expiration,
            fileRemoveButton,
            fileWrap,
            formatter,
            newButton,
            openDiscussion,
            openDiscussionOption,
            password,
            passwordInput,
            rawTextButton,
            downloadTextButton,
            qrCodeLink,
            emailLink,
            sendButton,
            retryButton,
            pasteExpiration = null,
            retryButtonCallback;

        /**
         * set the expiration on bootstrap templates in dropdown
         *
         * @name   TopNav.updateExpiration
         * @private
         * @function
         * @param  {Event} event
         */
        function updateExpiration(event) {
            // get selected option
            const target = event.target;

            // update dropdown display and save new expiration time
            const display = document.getElementById('pasteExpirationDisplay');
            if (display) {
                display.textContent = target.textContent;
            }
            pasteExpiration = target.getAttribute('data-expiration');

            event.preventDefault();
        }

        /**
         * set the format on bootstrap templates in dropdown from user interaction
         *
         * @name   TopNav.updateFormat
         * @private
         * @function
         * @param  {Event} event
         */
        function updateFormat(event) {
            // get selected option
            const target = event.target;

            // update dropdown display and save new format
            const newFormat = target.getAttribute('data-format');
            const display = document.getElementById('pasteFormatterDisplay');
            if (display) {
                display.textContent = target.textContent;
            }
            PasteViewer.setFormat(newFormat);

            event.preventDefault();
        }

        /**
         * when "burn after reading" is checked, disable discussion
         *
         * @name   TopNav.changeBurnAfterReading
         * @private
         * @function
         */
        function changeBurnAfterReading() {
            if (me.getBurnAfterReading()) {
                if (openDiscussionOption) {
                    openDiscussionOption.classList.add('buttondisabled');
                }
                if (openDiscussion) {
                    openDiscussion.checked = false;
                }

                // if button is actually disabled, force-enable it and uncheck other button
                if (burnAfterReadingOption) {
                    burnAfterReadingOption.classList.remove('buttondisabled');
                }
            } else {
                if (openDiscussionOption) {
                    openDiscussionOption.classList.remove('buttondisabled');
                }
            }
        }

        /**
         * when discussion is checked, disable "burn after reading"
         *
         * @name   TopNav.changeOpenDiscussion
         * @private
         * @function
         */
        function changeOpenDiscussion() {
            if (me.getOpenDiscussion()) {
                if (burnAfterReadingOption) {
                    burnAfterReadingOption.classList.add('buttondisabled');
                }
                if (burnAfterReading) {
                    burnAfterReading.checked = false;
                }

                // if button is actually disabled, force-enable it and uncheck other button
                if (openDiscussionOption) {
                    openDiscussionOption.classList.remove('buttondisabled');
                }
            } else {
                if (burnAfterReadingOption) {
                    burnAfterReadingOption.classList.remove('buttondisabled');
                }
            }
        }

        /**
         * Clear the password input in the top navigation
         *
         * @name TopNav.clearPasswordInput
         * @function
         */

        function clearPasswordInput() {
            if (passwordInput) {
                passwordInput.value = '';
            }
        }


        /**
         * Clear the attachment input in the top navigation.
         *
         * @name   TopNav.clearAttachmentInput
         * @function
         */
        function clearAttachmentInput() {
            // hide UI for selected files
            const inputElement = fileWrap && fileWrap.querySelector('input');
            if (inputElement) {
                inputElement.value = '';
            }
        }

        /**
         * return raw text
         *
         * @name   TopNav.rawText
         * @private
         * @function
         */
        function rawText() {
            TopNav.hideAllButtons();
            Alert.showLoading('Showing raw text…', 'time');
            let paste = PasteViewer.getText();

            // push a new state to allow back navigation with browser back button
            history.pushState(
                { type: 'raw' },
                document.title,
                // recreate document URL
                Helper.baseUri() + '?' + Model.getPasteId() + '#' +
                CryptTool.base58encode(Model.getPasteKey())
            );

            // we use text/html instead of text/plain to avoid a bug when
            // reloading the raw text view (it reverts to type text/html)
            const headElements = document.head.querySelectorAll(':not(noscript):not(script):not(link[type="text/css"])');

            const newDoc = document.open('text/html', 'replace');
            newDoc.write('<!DOCTYPE html><html><head>');
            for (let i = 0; i < headElements.length; ++i) {
                newDoc.write(headElements[i].outerHTML);
            }
            newDoc.write(
                '</head><body><pre>' +
                DOMPurify.sanitize(
                    Helper.htmlEntities(paste),
                    purifyHtmlConfig
                ) +
                '</pre></body></html>'
            );
            newDoc.close();
        }

        /**
         * download text
         *
         * @name   TopNav.downloadText
         * @private
         * @function
         */
        function downloadText() {
            const fileFormat = PasteViewer.getFormat() === 'markdown' ? '.md' : '.txt';
            const filename = 'document-' + Model.getPasteId() + fileFormat;
            const text = PasteViewer.getText();

            const element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);

            element.style.display = 'none';
            document.body.appendChild(element);

            element.click();

            document.body.removeChild(element);
        }

        /**
         * saves the language in a cookie and reloads the page
         *
         * @name   TopNav.setLanguage
         * @private
         * @function
         * @param  {Event} event
         */
        function setLanguage(event) {
            let lang = event.target.getAttribute('data-lang') || event.target.value;

            document.cookie = 'lang=' + lang + '; SameSite=Lax; Secure';
            window.location.reload();
            event.preventDefault();
        }

        /**
         * save the template in a cookie and reloads the page
         *
         * @name TopNav.setTemplate
         * @private
         * @function
         * @param {Event} event
         */
        function setTemplate(event) {
            let template = event.target.getAttribute('data-template') || event.target.value;

            document.cookie = 'template=' + template + '; SameSite=Lax; Secure';
            window.location.reload();
            event.preventDefault();
        }

        /**
         * hides all messages and creates a new document
         *
         * @name   TopNav.clickNewPaste
         * @private
         * @function
         */
        function clickNewPaste() {
            Controller.hideStatusMessages();
            Controller.newPaste();
        }

        /**
         * sends the document on [Ctrl]+[S] or, on macOS, [Cmd]+[S]
         *
         * Only acts while the send button is shown, so the browser's own
         * "save page" still works when viewing an existing document.
         *
         * @name   TopNav.sendOnShortcut
         * @private
         * @function
         * @param  {KeyboardEvent} event
         */
        function sendOnShortcut(event) {
            // the physical S key, so non-Latin keyboard layouts work, too
            const isSaveKey = event.code === 'KeyS';
            // Alt is excluded because AltGr is reported as Ctrl+Alt and some
            // layouts type letters with AltGr+S, Shift to leave "Save page as"
            // ([Ctrl]+[Shift]+[S]) to the browser
            const hasCorrectModifiers = (event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
            const isButtonAvailable = sendButton && !sendButton.classList.contains('hidden') && !sendButton.disabled;
            if (isSaveKey && hasCorrectModifiers && isButtonAvailable) {
                event.preventDefault();
                sendButton.click();
            }
        }

        /**
         * retrys some callback registered before
         *
         * @name   TopNav.clickRetryButton
         * @private
         * @function
         * @param  {Event} event
         */
        function clickRetryButton(event) {
            retryButtonCallback(event);
        }

        /**
         * removes the existing attachment
         *
         * @name   TopNav.removeAttachment
         * @private
         * @function
         * @param  {Event} event
         */
        function removeAttachment(event) {
            // if custom attachment is used, remove it first
            if (customAttachment && !customAttachment.classList.contains('hidden')) {
                AttachmentViewer.removeAttachment();
                customAttachment.classList.add('hidden');
                fileWrap.classList.remove('hidden');
            }

            // in any case, remove saved attachment data
            AttachmentViewer.removeAttachmentData();

            clearAttachmentInput();
            AttachmentViewer.clearDragAndDrop();

            // pevent '#' from appearing in the URL
            event.preventDefault();
        }

        /**
         * Shows the QR code of the current document (URL).
         *
         * @name   TopNav.displayQrCode
         * @private
         * @function
         */
        function displayQrCode() {
            const qrCanvas = kjua({
                render: 'canvas',
                text: window.location.href
            });
            const qrDisplay = document.getElementById('qrcode-display');
            if (qrDisplay) {
                qrDisplay.innerHTML = '';
                qrDisplay.appendChild(qrCanvas);
            }
        }

        /**
         * Template Email body.
         *
         * @name   TopNav.templateEmailBody
         * @private
         * @param {string} expirationDateString
         * @param {bool} isBurnafterreading
         */
        function templateEmailBody(expirationDateString, isBurnafterreading) {
            const EOL = '\n';
            const BULLET = '  - ';
            let emailBody = '';
            if (expirationDateString !== null || isBurnafterreading) {
                emailBody += I18n._('Notice:');
                emailBody += EOL;

                if (expirationDateString !== null) {
                    emailBody += EOL;
                    emailBody += BULLET;
                    // avoid DOMPurify mess with forward slash in expirationDateString
                    emailBody += Helper.sprintf(
                        I18n._(
                            'This link will expire after %s.',
                            '%s'
                        ),
                        expirationDateString
                    );
                }
                if (isBurnafterreading) {
                    emailBody += EOL;
                    emailBody += BULLET;
                    emailBody += I18n._(
                        'This link can only be accessed once, do not use back or refresh button in your browser.'
                    );
                }

                emailBody += EOL;
                emailBody += EOL;
            }
            emailBody += I18n._('Link:');
            emailBody += EOL;
            const pasteUrlElement = document.getElementById('pasteurl');
            emailBody += (pasteUrlElement && pasteUrlElement.getAttribute('href')) || window.location.href; // href is tried first as it might have been shortened
            return emailBody;
        }

        /**
         * Trigger Email send.
         *
         * @name   TopNav.triggerEmailSend
         * @private
         * @param {string} subject
         * @param {string} emailBody
         */
        function triggerEmailSend(subject, emailBody) {
            window.open(
                `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`,
                '_self',
                'noopener, noreferrer'
            );
        }

        /**
         * Send Email with current document (URL).
         *
         * @name   TopNav.sendEmail
         * @private
         * @function
         * @param  {Date|null} expirationDate date of expiration
         * @param  {bool} isBurnafterreading whether it is burn after reading
         */
        function sendEmail(expirationDate, isBurnafterreading) {
            const expirationDateRoundedToSecond = new Date(expirationDate);

            // round down at least 30 seconds to make up for the delay of request
            expirationDateRoundedToSecond.setUTCSeconds(
                expirationDateRoundedToSecond.getUTCSeconds() - 30
            );
            expirationDateRoundedToSecond.setUTCSeconds(0);

            // reused as-is by both the confirmation-modal and direct-send paths below
            const emailSubject = I18n._('Encrypted note on %s', document.title);

            const emailconfirmmodal = document.getElementById('emailconfirmmodal');
            if (expirationDate !== null) {
                const emailconfirmTimezoneCurrent = emailconfirmmodal.querySelector('#emailconfirm-timezone-current');
                const emailconfirmTimezoneUtc = emailconfirmmodal.querySelector('#emailconfirm-timezone-utc');
                let localeConfiguration = { dateStyle: 'long', timeStyle: 'long' };
                const bootstrap5EmailConfirmModal = typeof bootstrap !== 'undefined' && bootstrap.Tooltip && bootstrap.Tooltip.VERSION ?
                    new bootstrap.Modal(emailconfirmmodal) : null;

                function sendEmailAndHideModal() {
                    const emailBody = templateEmailBody(
                        // we don't use Date.prototype.toUTCString() because we would like to avoid GMT
                        expirationDateRoundedToSecond.toLocaleString(
                            [], localeConfiguration
                        ), isBurnafterreading
                    );
                    if (bootstrap5EmailConfirmModal) {
                        bootstrap5EmailConfirmModal.hide();
                    }
                    triggerEmailSend(emailSubject, emailBody);
                }

                emailconfirmmodal.addEventListener('shown.bs.modal', () => {
                    emailconfirmTimezoneUtc.focus();
                });

                emailconfirmTimezoneCurrent.removeEventListener('click', sendEmailAndHideModal);
                emailconfirmTimezoneCurrent.addEventListener('click', sendEmailAndHideModal);
                emailconfirmTimezoneUtc.removeEventListener('click', sendEmailAndHideModal);
                emailconfirmTimezoneUtc.addEventListener('click', () => {
                    localeConfiguration.timeZone = 'UTC';
                    sendEmailAndHideModal();
                });
                if (bootstrap5EmailConfirmModal) {
                    bootstrap5EmailConfirmModal.show();
                }
            } else {
                triggerEmailSend(emailSubject, templateEmailBody(null, isBurnafterreading));
            }
        }

        /**
         * Shows all navigation elements for viewing an existing document
         *
         * @name   TopNav.showViewButtons
         * @function
         */
        me.showViewButtons = function () {
            if (viewButtonsDisplayed) {
                return;
            }

            newButton.classList.remove('hidden');
            cloneButton.classList.remove('hidden');
            rawTextButton.classList.remove('hidden');
            downloadTextButton.classList.remove('hidden');
            if (qrCodeLink) {
                qrCodeLink.classList.remove('hidden');
            }

            viewButtonsDisplayed = true;
        };

        /**
         * Hides all navigation elements for viewing an existing document
         *
         * @name   TopNav.hideViewButtons
         * @function
         */
        me.hideViewButtons = function () {
            if (!viewButtonsDisplayed) {
                return;
            }

            cloneButton.classList.add('hidden');
            newButton.classList.add('hidden');
            rawTextButton.classList.add('hidden');
            downloadTextButton.classList.add('hidden');
            if (qrCodeLink) {
                qrCodeLink.classList.add('hidden');
            }
            me.hideEmailButton();

            viewButtonsDisplayed = false;
        };

        /**
         * Hides all elements belonging to existing documents
         *
         * @name   TopNav.hideAllButtons
         * @function
         */
        me.hideAllButtons = function () {
            me.hideViewButtons();
            me.hideCreateButtons();
        };

        /**
         * shows all elements needed when creating a new document
         *
         * @name   TopNav.showCreateButtons
         * @function
         */
        me.showCreateButtons = function () {
            if (createButtonsDisplayed) {
                return;
            }

            if (attach) {
                attach.classList.remove('hidden');
            }
            burnAfterReadingOption.classList.remove('hidden');
            expiration.classList.remove('hidden');
            formatter.classList.remove('hidden');
            newButton.classList.remove('hidden');
            if (openDiscussionOption) {
                openDiscussionOption.classList.remove('hidden');
            }
            if (password) {
                password.classList.remove('hidden');
            }
            sendButton.classList.remove('hidden');

            createButtonsDisplayed = true;
        };

        /**
         * shows all elements needed when creating a new document
         *
         * @name   TopNav.hideCreateButtons
         * @function
         */
        me.hideCreateButtons = function () {
            if (!createButtonsDisplayed) {
                return;
            }

            newButton.classList.add('hidden');
            sendButton.classList.add('hidden');
            expiration.classList.add('hidden');
            formatter.classList.add('hidden');
            burnAfterReadingOption.classList.add('hidden');
            if (openDiscussionOption) {
                openDiscussionOption.classList.add('hidden');
            }
            if (password) {
                password.classList.add('hidden');
            }
            if (attach) {
                attach.classList.add('hidden');
            }

            createButtonsDisplayed = false;
        };

        /**
         * only shows the "new document" button
         *
         * @name   TopNav.showNewPasteButton
         * @function
         */
        me.showNewPasteButton = function () {
            newButton.classList.remove('hidden');
        };

        /**
         * only shows the "retry" button
         *
         * @name   TopNav.showRetryButton
         * @function
         */
        me.showRetryButton = function () {
            retryButton.classList.remove('hidden');
            // The Bootstrap 5 template gives Retry its own list item. That item
            // still takes a flex gap while only the button is hidden.
            if (Helper.isBootstrap5()) {
                retryButton.parentElement.classList.remove('hidden');
            }
        };

        /**
         * hides the "retry" button
         *
         * @name   TopNav.hideRetryButton
         * @function
         */
        me.hideRetryButton = function () {
            retryButton.classList.add('hidden');
            if (Helper.isBootstrap5()) {
                retryButton.parentElement.classList.add('hidden');
            }
        };

        /**
         * show the "email" button
         *
         * @name   TopNav.showEmailbutton
         * @function
         * @param {number|undefined} optionalRemainingTimeInSeconds
         * @param {bool|undefined} optionalBurnAfterReading
         */
        me.showEmailButton = function (optionalRemainingTimeInSeconds, optionalBurnAfterReading) {
            if (!emailLink) {
                return;
            }

            try {
                // we cache expiration date in closure to avoid inaccurate expiration datetime
                const expirationDate = Helper.calculateExpirationDate(
                    new Date(),
                    typeof optionalRemainingTimeInSeconds === 'number' ? optionalRemainingTimeInSeconds : TopNav.getExpiration()
                );
                const isBurnafterreading = typeof optionalBurnAfterReading === 'boolean' ?
                    optionalBurnAfterReading : TopNav.getBurnAfterReading();

                emailLink.classList.remove('hidden');
                emailLink.removeEventListener('click', sendEmail);
                emailLink.addEventListener('click', () => {
                    sendEmail(expirationDate, isBurnafterreading);
                });
            } catch (error) {
                console.error(error);
                Alert.showError('Cannot calculate expiration date.');
            }
        };

        /**
         * hide the "email" button
         *
         * @name   TopNav.hideEmailButton
         * @function
         */
        me.hideEmailButton = function () {
            if (!emailLink) {
                return;
            }

            emailLink.classList.add('hidden');
            emailLink.removeEventListener('click', sendEmail);
        };

        /**
         * only hides the clone button
         *
         * @name   TopNav.hideCloneButton
         * @function
         */
        me.hideCloneButton = function () {
            cloneButton.classList.add('hidden');
        };

        /**
         * only hides the raw text button
         *
         * @name   TopNav.hideRawButton
         * @function
         */
        me.hideRawButton = function () {
            rawTextButton.classList.add('hidden');
        };

        /**
         * only hides the download text button
         *
         * @name   TopNav.hideRawButton
         * @function
         */
        me.hideDownloadButton = function () {
            downloadTextButton.classList.add('hidden');
        };

        /**
         * only hides the qr code button
         *
         * @name   TopNav.hideQrCodeButton
         * @function
         */
        me.hideQrCodeButton = function () {
            if (qrCodeLink) {
                qrCodeLink.classList.add('hidden');
            }
        };

        /**
         * hide irrelevant buttons when viewing burn after reading document
         *
         * @name   TopNav.hideBurnAfterReadingButtons
         * @function
         */
        me.hideBurnAfterReadingButtons = function () {
            me.hideCloneButton();
            me.hideQrCodeButton();
            me.hideEmailButton();
        };

        /**
         * hides the file selector in attachment
         *
         * @name   TopNav.hideFileSelector
         * @function
         */
        me.hideFileSelector = function () {
            fileWrap.classList.add('hidden');
        };


        /**
         * shows the custom attachment
         *
         * @name   TopNav.showCustomAttachment
         * @function
         */
        me.showCustomAttachment = function () {
            if (!customAttachment) {
                return;
            }

            customAttachment.classList.remove('hidden');
        };

        /**
         * hides the custom attachment
         *
         * @name  TopNav.hideCustomAttachment
         * @function
         */
        me.hideCustomAttachment = function () {
            if (customAttachment) {
                customAttachment.classList.add('hidden');
            }

            if (fileWrap) {
                fileWrap.classList.remove('hidden');
            }
        };

        /**
         * collapses the navigation bar, only if expanded
         *
         * @name   TopNav.collapseBar
         * @function
         */
        me.collapseBar = function () {
            const navbar = document.getElementById('navbar');
            if (navbar && navbar.getAttribute('aria-expanded') === 'true') {
                const toggle = document.querySelector('.navbar-toggle');
                if (toggle) {
                    toggle.click();
                }
            }
        };

        /**
         * Reset the top navigation back to it's default values.
         *
         * @name   TopNav.resetInput
         * @function
         */
        me.resetInput = function () {
            clearAttachmentInput();
            clearPasswordInput();
            if (burnAfterReading) {
                burnAfterReading.checked = burnAfterReadingDefault;
            }
            if (openDiscussion) {
                openDiscussion.checked = openDiscussionDefault;
            }
            if (openDiscussionOption && (openDiscussionDefault || !burnAfterReadingDefault)) {
                openDiscussionOption.classList.remove('buttondisabled');
            }
            if (burnAfterReadingDefault || !openDiscussionDefault) {
                burnAfterReadingOption.classList.remove('buttondisabled');
            }

            pasteExpiration = Model.getExpirationDefault() || pasteExpiration;
            const pasteExpirationSelect = document.getElementById('pasteExpiration');
            if (pasteExpirationSelect) {
                pasteExpirationSelect.querySelectorAll('option').forEach((option) => {
                    if (option.value === pasteExpiration) {
                        const display = document.getElementById('pasteExpirationDisplay');
                        if (display) {
                            display.textContent = option.textContent;
                        }
                    }
                });
            }
        };

        /**
         * returns the currently set expiration time
         *
         * @name   TopNav.getExpiration
         * @function
         * @return {int}
         */
        me.getExpiration = function () {
            return pasteExpiration;
        };

        /**
         * returns the currently selected file(s)
         *
         * @name   TopNav.getFileList
         * @function
         * @return {FileList|null}
         */
        me.getFileList = function () {
            const file = document.getElementById('file');

            // if no file given, return null
            if (!file || !file.files || !file.files.length) {
                return null;
            }

            // ensure the selected file is still accessible
            if (!file.files[0]) {
                return null;
            }

            return file.files;
        };

        /**
         * returns the state of the burn after reading checkbox
         *
         * @name   TopNav.getBurnAfterReading
         * @function
         * @return {bool}
         */
        me.getBurnAfterReading = function () {
            return burnAfterReading ? !!burnAfterReading.checked : false;
        };

        /**
         * returns the state of the discussion checkbox
         *
         * @name   TopNav.getOpenDiscussion
         * @function
         * @return {bool}
         */
        me.getOpenDiscussion = function () {
            return openDiscussion ? !!openDiscussion.checked : false;
        };

        /**
         * returns the entered password
         *
         * @name   TopNav.getPassword
         * @function
         * @return {string}
         */
        me.getPassword = function () {
            // when password is disabled passwordInput.value will return undefined
            return passwordInput && passwordInput.value || '';
        };

        /**
         * returns the element where custom attachments can be placed
         *
         * Used by AttachmentViewer when an attachment is cloned here.
         *
         * @name   TopNav.getCustomAttachment
         * @function
         * @return {HTMLElement}
         */
        me.getCustomAttachment = function () {
            return customAttachment;
        };

        /**
         * Set a function to call when the retry button is clicked.
         *
         * @name   TopNav.setRetryCallback
         * @function
         * @param {function} callback
         */
        me.setRetryCallback = function (callback) {
            retryButtonCallback = callback;
        };

        /**
         * Highlight file upload
         *
         * @name  TopNav.highlightFileupload
         * @function
         */
        me.highlightFileupload = function () {
            // visually indicate file uploaded
            const attachDropdownToggle = attach && attach.querySelector('.dropdown-toggle');
            if (attachDropdownToggle && attachDropdownToggle.getAttribute('aria-expanded') === 'false') {
                if (Helper.isBootstrap5()) {
                    new bootstrap.Dropdown(attachDropdownToggle).toggle();
                } else {
                    attachDropdownToggle.click();
                }
            }
            fileWrap.classList.add('highlight');
            setTimeout(function () {
                fileWrap.classList.remove('highlight');
            }, 300);
        }

        /**
         * set the format on bootstrap templates in dropdown programmatically
         *
         * @name    TopNav.setFormat
         * @function
         */
        me.setFormat = function (format) {
            if (Helper.isBootstrap5()) {
                const select = formatter.querySelector('select');
                if (select) {
                    select.value = format;
                }
            } else {
                const formatLink = formatter.parentElement.querySelector(`a[data-format="${format}"]`);
                if (formatLink) {
                    formatLink.click();
                }
            }
        }

        /**
         * returns if attachment dropdown is readonly, not editable
         *
         * @name   TopNav.isAttachmentReadonly
         * @function
         * @return {bool}
         */
        me.isAttachmentReadonly = function () {
            return !createButtonsDisplayed || (attach && attach.classList.contains('hidden'));
        }

        /**
         * init navigation manager
         *
         * preloads DOM elements
         *
         * @name   TopNav.init
         * @function
         */
        /**
         * bind all navigation event listeners
         *
         * @name   TopNav.bindEvents
         * @private
         * @function
         */
        function bindEvents() {
            const languageDropdown = document.getElementById('language');
            if (languageDropdown) {
                languageDropdown.querySelectorAll('ul.dropdown-menu li a').forEach(link => {
                    link.addEventListener('click', setLanguage);
                });
            }

            const templateDropdown = document.getElementById('template');
            if (templateDropdown) {
                templateDropdown.querySelectorAll('ul.dropdown-menu li a').forEach(link => {
                    link.addEventListener('click', setTemplate);
                });
            }

            // bind events
            if (burnAfterReading) {
                burnAfterReading.addEventListener('change', changeBurnAfterReading);
            }
            if (openDiscussionOption) {
                openDiscussionOption.addEventListener('change', changeOpenDiscussion);
            }
            if (newButton) {
                newButton.addEventListener('click', clickNewPaste);
            }
            if (sendButton) {
                sendButton.addEventListener('click', PasteEncrypter.sendPaste);
                document.addEventListener('keydown', sendOnShortcut);
            }
            if (cloneButton) {
                cloneButton.addEventListener('click', Controller.clonePaste);
            }
            if (rawTextButton) {
                rawTextButton.addEventListener('click', rawText);
            }
            if (downloadTextButton) {
                downloadTextButton.addEventListener('click', downloadText);
            }
            if (retryButton) {
                retryButton.addEventListener('click', clickRetryButton);
            }
            if (fileRemoveButton) {
                fileRemoveButton.addEventListener('click', removeAttachment);
            }
            if (qrCodeLink) {
                qrCodeLink.addEventListener('click', displayQrCode);
            }

            if (Helper.isBootstrap5()) {
                const pasteExpirationSelect = document.getElementById('pasteExpiration');
                if (pasteExpirationSelect) {
                    pasteExpirationSelect.addEventListener('change', function () {
                        pasteExpiration = Model.getExpirationDefault();
                    });
                }
                const pasteFormatterSelect = document.getElementById('pasteFormatter');
                if (pasteFormatterSelect) {
                    pasteFormatterSelect.addEventListener('change', function () {
                        PasteViewer.setFormat(Model.getFormatDefault());
                    });
                }
            } else {
                // bootstrap template drop downs
                if (expiration) {
                    expiration.parentElement.querySelectorAll('ul.dropdown-menu li a').forEach(link => {
                        link.addEventListener('click', updateExpiration);
                    });
                }
                if (formatter) {
                    formatter.parentElement.querySelectorAll('ul.dropdown-menu li a').forEach(link => {
                        link.addEventListener('click', updateFormat);
                    });
                }

                // page drop downs
                const pasteExpirationSelect = document.getElementById('pasteExpiration');
                if (pasteExpirationSelect) {
                    pasteExpirationSelect.addEventListener('change', function () {
                        pasteExpiration = Model.getExpirationDefault();
                    });
                }
                const pasteFormatterSelect = document.getElementById('pasteFormatter');
                if (pasteFormatterSelect) {
                    pasteFormatterSelect.addEventListener('change', function () {
                        PasteViewer.setFormat(Model.getFormatDefault());
                    });
                }
            }
        }

        me.init = function () {
            attach = document.getElementById('attach');
            burnAfterReading = document.getElementById('burnafterreading');
            burnAfterReadingOption = document.getElementById('burnafterreadingoption');
            cloneButton = document.getElementById('clonebutton');
            customAttachment = document.getElementById('customattachment');
            expiration = document.getElementById('expiration');
            fileRemoveButton = document.getElementById('fileremovebutton');
            fileWrap = document.getElementById('filewrap');
            formatter = document.getElementById('formatter');
            newButton = document.getElementById('newbutton');
            openDiscussion = document.getElementById('opendiscussion');
            openDiscussionOption = document.getElementById('opendiscussionoption');
            password = document.getElementById('password');
            passwordInput = document.getElementById('passwordinput');
            rawTextButton = document.getElementById('rawtextbutton');
            downloadTextButton = document.getElementById('downloadtextbutton');
            retryButton = document.getElementById('retrybutton');
            sendButton = document.getElementById('sendbutton');
            qrCodeLink = document.getElementById('qrcodelink');
            emailLink = document.getElementById('emaillink');

            bindEvents();

            // initiate default state of checkboxes
            changeBurnAfterReading();
            changeOpenDiscussion();

            // get default values from template or fall back to set value
            burnAfterReadingDefault = me.getBurnAfterReading();
            openDiscussionDefault = me.getOpenDiscussion();
            pasteExpiration = Model.getExpirationDefault();

            createButtonsDisplayed = false;
            viewButtonsDisplayed = false;
        };

        return me;
    })(window, document);

    /**
     * Responsible for AJAX requests, transparently handles encryption…
     *
     * @name   ServerInteraction
     * @class
     */
    const ServerInteraction = (function () {
        const me = {};

        let successFunc = null,
            failureFunc = null,
            symmetricKey = null,
            url,
            data,
            password;

        /**
         * public variable ('constant') for errors to prevent magic numbers
         *
         * @name   ServerInteraction.error
         * @readonly
         * @enum   {Object}
         */
        me.error = {
            okay: 0,
            custom: 1,
            unknown: 2,
            serverError: 3
        };

        /**
         * ajaxHeaders to send in AJAX requests
         *
         * @name   ServerInteraction.ajaxHeaders
         * @private
         * @readonly
         * @enum   {Object}
         */
        const ajaxHeaders = {
            'X-Requested-With': 'JSONHttpRequest',
            'Content-Type': 'application/json'
        };

        /**
         * called after successful upload
         *
         * @name   ServerInteraction.success
         * @private
         * @function
         * @param {int} status
         * @param {int} result - optional
         */
        function success(status, result) {
            if (successFunc !== null) {
                // add useful data to result
                result.encryptionKey = symmetricKey;
                successFunc(status, result);
            }
        }

        /**
         * called after a upload failure
         *
         * @name   ServerInteraction.fail
         * @private
         * @function
         * @param {int} status - internal code
         * @param {int} result - original error code
         */
        function fail(status, result) {
            if (failureFunc !== null) {
                failureFunc(status, result);
            }
        }

        /**
         * actually uploads the data
         *
         * @name   ServerInteraction.run
         * @function
         */
        me.run = function () {
            let isPost = Object.keys(data).length > 0,
                options = {
                    method: isPost ? 'POST' : 'GET',
                    headers: ajaxHeaders
                };
            if (isPost) {
                options.body = JSON.stringify(data);
            }
            fetch(url, options)
                .then(response => {
                    if (!response.ok) {
                        throw response;
                    }
                    return response.json();
                })
                .then(result => {
                    if (result.status === 0) {
                        success(0, result);
                    } else if (result.status === 1) {
                        fail(1, result);
                    } else {
                        fail(2, result);
                    }
                })
                .catch(error => {
                    console.error(error);
                    fail(3, error);
                });
        };

        /**
         * return currently set data, used in unit testing
         *
         * @name   ServerInteraction.getData
         * @function
         */
        me.getData = function () {
            return data;
        };

        /**
         * set success function
         *
         * @name   ServerInteraction.setUrl
         * @function
         * @param {function} newUrl
         */
        me.setUrl = function (newUrl) {
            url = newUrl;
        };

        /**
         * sets the password to use (first value) and optionally also the
         * encryption key (not recommended, it is automatically generated).
         *
         * Note: Call this after prepare() as prepare() resets these values.
         *
         * @name   ServerInteraction.setCryptValues
         * @function
         * @param {string} newPassword
         * @param {string} newKey       - optional
         */
        me.setCryptParameters = function (newPassword, newKey) {
            password = newPassword;

            if (typeof newKey !== 'undefined') {
                symmetricKey = newKey;
            }
        };

        /**
         * set success function
         *
         * @name   ServerInteraction.setSuccess
         * @function
         * @param {function} func
         */
        me.setSuccess = function (func) {
            successFunc = func;
        };

        /**
         * set failure function
         *
         * @name   ServerInteraction.setFailure
         * @function
         * @param {function} func
         */
        me.setFailure = function (func) {
            failureFunc = func;
        };

        /**
         * prepares a new upload
         *
         * Call this when doing a new upload to reset any data from potential
         * previous uploads. Must be called before any other method of this
         * module.
         *
         * @name   ServerInteraction.prepare
         * @function
         * @return {object}
         */
        me.prepare = function () {
            // entropy should already be checked!

            // reset password
            password = '';

            // reset key, so it a new one is generated when it is used
            symmetricKey = null;

            // reset data
            successFunc = null;
            failureFunc = null;
            url = Helper.baseUri();
            data = {};
        };

        /**
         * encrypts and sets the data
         *
         * @name   ServerInteraction.setCipherMessage
         * @async
         * @function
         * @param {object} cipherMessage
         */
        me.setCipherMessage = async function (cipherMessage) {
            if (
                symmetricKey === null ||
                (typeof symmetricKey === 'string' && symmetricKey === '')
            ) {
                symmetricKey = CryptTool.getSymmetricKey();
            }
            if (!data.hasOwnProperty('adata')) {
                data['adata'] = [];
            }
            let cipherResult = await CryptTool.cipher(symmetricKey, password, JSON.stringify(cipherMessage), data['adata']);
            data['v'] = 2;
            data['ct'] = cipherResult[0];
            data['adata'] = cipherResult[1];

        };

        /**
         * set the additional metadata to send unencrypted
         *
         * @name   ServerInteraction.setUnencryptedData
         * @function
         * @param {string} index
         * @param {mixed} element
         */
        me.setUnencryptedData = function (index, element) {
            data[index] = element;
        };

        /**
         * Helper, which parses shows a general error message based on the result of the ServerInteraction
         *
         * @name    ServerInteraction.parseUploadError
         * @function
         * @param {int} status
         * @param {object} data
         * @param {string} doThisThing - a human description of the action, which was tried
         * @return {array}
         */
        me.parseUploadError = function (status, data, doThisThing) {
            let errorArray;

            switch (status) {
                case me.error.custom:
                    errorArray = ['Could not ' + doThisThing + ': %s', data.message];
                    break;
                case me.error.unknown:
                    errorArray = ['Could not ' + doThisThing + ': %s', I18n._('unknown status')];
                    break;
                case me.error.serverError:
                    errorArray = ['Could not ' + doThisThing + ': %s', I18n._('server error or not responding')];
                    break;
                default:
                    errorArray = ['Could not ' + doThisThing + ': %s', I18n._('unknown error')];
                    break;
            }

            return errorArray;
        };

        return me;
    })();

    /**
     * (controller) Responsible for encrypting document and sending it to server.
     *
     * Does upload, encryption is done transparently by ServerInteraction.
     *
     * @name PasteEncrypter
     * @class
     */
    const PasteEncrypter = (function () {
        const me = {};

        /**
         * called after successful document upload
         *
         * @name PasteEncrypter.showCreatedPaste
         * @private
         * @function
         * @param {int} status
         * @param {object} data
         */
        function showCreatedPaste(status, data) {
            Alert.hideLoading();
            Alert.hideMessages();

            // show notification
            const baseUri = Helper.baseUri() + '?',
                url = baseUri + data.id + (TopNav.getBurnAfterReading() ? loadConfirmPrefix : '#') + CryptTool.base58encode(data.encryptionKey),
                deleteUrl = baseUri + 'pasteid=' + data.id + '&deletetoken=' + data.deletetoken;
            PasteStatus.createPasteNotification(url, deleteUrl);

            // show new URL in browser bar
            history.pushState({ type: 'newpaste' }, document.title, url);

            TopNav.showViewButtons();

            CopyToClipboard.setUrl(url);
            CopyToClipboard.showKeyboardShortcutHint();

            // this cannot be grouped with showViewButtons due to remaining time calculation
            TopNav.showEmailButton();

            TopNav.hideRawButton();
            TopNav.hideDownloadButton();
            Editor.hide();

            PasteStatus.checkAutoShorten();

            // parse and show text
            // (preparation already done in me.sendPaste())
            PasteViewer.run();
        }

        /**
         * called after successful comment upload
         *
         * @name PasteEncrypter.showUploadedComment
         * @private
         * @function
         * @param {int} status
         * @param {object} data
         */
        function showUploadedComment(status, data) {
            // show success message
            Alert.showStatus('Comment posted.');

            // reload document
            Controller.refreshPaste(function () {
                // highlight sent comment
                DiscussionViewer.highlightComment(data.id, true);
                // reset error handler
                Alert.setCustomHandler(null);
            });
        }

        /**
         * send a reply in a discussion
         *
         * @name   PasteEncrypter.sendComment
         * @async
         * @function
         */
        me.sendComment = async function () {
            // get data
            const plainText = DiscussionViewer.getReplyMessage();

            // do not send if there is no data
            if (plainText.length === 0) {
                return;
            }

            let nickname = DiscussionViewer.getReplyNickname(),
                parentid = DiscussionViewer.getReplyCommentId();

            Alert.hideMessages();
            Alert.setCustomHandler(DiscussionViewer.handleNotification);

            // UI loading state
            TopNav.hideAllButtons();
            Alert.showLoading('Sending comment…', 'cloud-upload');
            // prepare server interaction
            ServerInteraction.prepare();
            ServerInteraction.setCryptParameters(Prompt.getPassword(), Model.getPasteKey());

            // set success/fail functions
            ServerInteraction.setSuccess(showUploadedComment);
            ServerInteraction.setFailure(function (status, data) {
                // revert loading status…
                Alert.hideLoading();
                TopNav.showViewButtons();

                // …show error message…
                Alert.showError(
                    ServerInteraction.parseUploadError(status, data, 'post comment')
                );

                // …and reset error handler
                Alert.setCustomHandler(null);
            });

            // fill it with unencrypted params
            ServerInteraction.setUnencryptedData('pasteid', Model.getPasteId());
            if (typeof parentid === 'undefined') {
                // if parent id is not set, this is the top-most comment, so use
                // document id as parent, as the root element of the discussion tree
                ServerInteraction.setUnencryptedData('parentid', Model.getPasteId());
            } else {
                ServerInteraction.setUnencryptedData('parentid', parentid);
            }

            // prepare cypher message
            let cipherMessage = {
                'comment': plainText
            };
            if (nickname.length > 0) {
                cipherMessage['nickname'] = nickname;
            }

            await ServerInteraction.setCipherMessage(cipherMessage).catch(Alert.showError);
            ServerInteraction.run();
        };

        /**
         * sends a new document to server
         *
         * @name   PasteEncrypter.sendPaste
         * @async
         * @function
         */
        me.sendPaste = async function () {
            // hide previous (error) messages
            Controller.hideStatusMessages();

            // UI loading state
            TopNav.hideAllButtons();
            Alert.showLoading('Sending document…', 'cloud-upload');
            TopNav.collapseBar();

            // get data
            const plainText = Editor.getText(),
                  format    = PasteViewer.getFormat(),
                  // the methods may return different values if no files are attached (null, undefined or false)
                  files     = TopNav.getFileList() || AttachmentViewer.getFiles() || AttachmentViewer.hasAttachmentData();

            // do not send if there is no data
            if (plainText.length === 0 && !files) {
                // revert loading status…
                Alert.hideLoading();
                TopNav.showCreateButtons();
                return;
            }

            // prepare server interaction
            ServerInteraction.prepare();
            ServerInteraction.setCryptParameters(TopNav.getPassword());

            // set success/fail functions
            ServerInteraction.setSuccess(showCreatedPaste);
            ServerInteraction.setFailure(function (status, data) {
                // revert loading status…
                Alert.hideLoading();
                TopNav.showCreateButtons();

                // show error message
                Alert.showError(
                    ServerInteraction.parseUploadError(status, data, 'create document')
                );
            });

            // fill it with unencrypted submitted options
            ServerInteraction.setUnencryptedData('adata', [
                null, format,
                TopNav.getOpenDiscussion() ? 1 : 0,
                TopNav.getBurnAfterReading() ? 1 : 0
            ]);
            ServerInteraction.setUnencryptedData('meta', { 'expire': TopNav.getExpiration() });

            // prepare PasteViewer for later preview
            PasteViewer.setText(plainText);
            PasteViewer.setFormat(format);

            // prepare cypher message
            let attachmentsData = AttachmentViewer.getAttachmentsData(),
                cipherMessage = {
                    'paste': plainText
                };
            if (attachmentsData.length) {
                cipherMessage['attachment'] = attachmentsData;
                cipherMessage['attachment_name'] = AttachmentViewer.getFiles().map(fileInfo => fileInfo.name);
            } else if (AttachmentViewer.hasAttachment()) {
                // fall back to cloned part
                let attachments = AttachmentViewer.getAttachments();
                cipherMessage['attachment'] = attachments.map(attachment => attachment[0]);
                cipherMessage['attachment_name'] = attachments.map(attachment => attachment[1]);

                cipherMessage['attachment'] = await Promise.all(cipherMessage['attachment'].map(async (attachment, i) => {
                    // we need to retrieve data from blob if browser already parsed it in memory
                    if (typeof attachment === 'string' && attachment.startsWith('blob:')) {
                        Alert.showStatus(
                            [
                                'Retrieving cloned file \'%s\' from memory...',
                                cipherMessage['attachment_name'][i]
                            ],
                            'copy'
                        );
                        try {
                            const response = await fetch(attachment, {
                                method: 'GET',
                                credentials: 'omit',
                                signal: AbortSignal.timeout(10000)
                            });
                            if (!response.ok) {
                                throw new Error('HTTP ' + response.status);
                            }
                            const blobData = await response.blob();
                            if (blobData instanceof window.Blob) {
                                const fileReading = new Promise(function (resolve, reject) {
                                    const fileReader = new FileReader();
                                    fileReader.onload = function (event) {
                                        resolve(event.target.result);
                                    };
                                    fileReader.onerror = function (error) {
                                        reject(error);
                                    }
                                    fileReader.readAsDataURL(blobData);
                                });

                                return await fileReading;
                            } else {
                                const error = 'Cannot process attachment data.';
                                Alert.showError(error);
                                throw new TypeError(error);
                            }
                        } catch (error) {
                            Alert.showError('Cannot retrieve attachment.');
                            throw error;
                        }
                    }
                }));
            }

            // encrypt message
            await ServerInteraction.setCipherMessage(cipherMessage).catch(Alert.showError);

            // send data
            ServerInteraction.run();
        };

        return me;
    })();

    /**
     * (controller) Responsible for decrypting cipherdata and passing data to view.
     *
     * Only decryption, no download.
     *
     * @name PasteDecrypter
     * @class
     */
    const PasteDecrypter = (function () {
        const me = {};

        /**
         * decrypt data or prompts for password in case of failure
         *
         * @name   PasteDecrypter.decryptOrPromptPassword
         * @private
         * @async
         * @function
         * @param  {string} key
         * @param  {string} password - optional, may be an empty string
         * @param  {string} cipherdata
         * @throws {string}
         * @return {Promise<false|string>} false, when unsuccessful or string (decrypted data)
         */
        async function decryptOrPromptPassword(key, password, cipherdata) {
            // try decryption without password
            const plaindata = await CryptTool.decipher(key, password, cipherdata);

            // if it fails, request password
            if (plaindata.length === 0 && password.length === 0) {
                // show prompt
                Prompt.requestPassword();

                // Thus, we cannot do anything yet, we need to wait for the user
                // input.
                return false;
            }

            // if all tries failed, we can only return an error
            if (plaindata.length === 0) {
                return false;
            }

            return plaindata;
        }

        /**
         * decrypt the actual document text
         *
         * @name   PasteDecrypter.decryptPaste
         * @private
         * @async
         * @function
         * @param  {Paste} paste - document data in object form
         * @param  {string} key
         * @param  {string} password
         * @throws {string}
         * @return {Promise}
         */
        async function decryptPaste(paste, key, password) {
            const pastePlain = await decryptOrPromptPassword(
                key, password,
                paste.getCipherData()
            );
            if (pastePlain === false) {
                if (password.length === 0) {
                    throw 'waiting on user to provide a password';
                } else {
                    Alert.hideLoading();
                    // reset password, so it can be re-entered
                    Prompt.reset();
                    TopNav.showRetryButton();
                    throw 'Could not decrypt data. Did you enter a wrong password? Retry with the button at the top.';
                }
            }

            const pasteMessage = JSON.parse(pastePlain);
            if (pasteMessage.hasOwnProperty('attachment') && pasteMessage.hasOwnProperty('attachment_name')) {
                if (Array.isArray(pasteMessage.attachment) && Array.isArray(pasteMessage.attachment_name)) {
                    pasteMessage.attachment.forEach((attachment, key) => {
                        const attachment_name = pasteMessage.attachment_name[key];
                        AttachmentViewer.setAttachment(attachment, attachment_name);
                    });
                } else {
                    // Continue to process attachment parameters as strings to ensure backward compatibility
                    AttachmentViewer.setAttachment(pasteMessage.attachment, pasteMessage.attachment_name);
                }
                AttachmentViewer.showAttachment();
            }
            PasteViewer.setFormat(paste.getFormat());
            PasteViewer.setText(pasteMessage.paste);
            PasteViewer.run();
        }

        /**
         * decrypts all comments and shows them
         *
         * @name   PasteDecrypter.decryptComments
         * @private
         * @async
         * @function
         * @param  {Paste} paste - document data in object form
         * @param  {string} key
         * @param  {string} password
         * @return {Promise}
         */
        async function decryptComments(paste, key, password) {
            // remove potential previous discussion
            DiscussionViewer.prepareNewDiscussion();

            const commentDecryptionPromises = [];
            // iterate over comments
            for (let i = 0; i < paste.comments.length; ++i) {
                const comment = new Comment(paste.comments[i]),
                    commentPromise = CryptTool.decipher(key, password, comment.getCipherData());
                paste.comments[i] = comment;
                commentDecryptionPromises.push(
                    commentPromise.then(function (commentJson) {
                        const commentMessage = JSON.parse(commentJson);
                        return [
                            commentMessage.comment || '',
                            commentMessage.nickname || ''
                        ];
                    })
                );
            }
            return Promise.all(commentDecryptionPromises).then(function (plaintexts) {
                for (let i = 0; i < paste.comments.length; ++i) {
                    if (plaintexts[i][0].length === 0) {
                        continue;
                    }
                    DiscussionViewer.addComment(
                        paste.comments[i],
                        plaintexts[i][0],
                        plaintexts[i][1]
                    );
                }
            });
        }

        /**
         * show decrypted text in the display area, including discussion (if open)
         *
         * @name   PasteDecrypter.run
         * @function
         * @param  {Paste} [paste] - (optional) object including comments to display (items = array with keys ('data','meta'))
         */
        me.run = function (paste) {
            Alert.hideMessages();
            Alert.setCustomHandler(null);
            Alert.showLoading('Decrypting document…', 'cloud-download');

            if (typeof paste === 'undefined' || paste.type === 'click') {
                // get cipher data and wait until it is available
                Model.getPasteData(me.run);
                return;
            }

            let key = Model.getPasteKey(),
                password = Prompt.getPassword(),
                decryptionPromises = [];

            TopNav.setRetryCallback(function () {
                TopNav.hideRetryButton();
                me.run(paste);
            });

            // Clear attachments to prevent duplicates
            AttachmentViewer.removeAttachment();

            // decrypt paste & attachments
            decryptionPromises.push(decryptPaste(paste, key, password));

            // if the discussion is opened on this document, display it
            if (paste.isDiscussionEnabled()) {
                decryptionPromises.push(decryptComments(paste, key, password));
            }

            // shows the remaining time (until) deletion
            PasteStatus.showRemainingTime(paste);

            CopyToClipboard.showKeyboardShortcutHint();

            Promise.all(decryptionPromises)
                .then(() => {
                    Alert.hideLoading();
                    TopNav.showViewButtons();

                    // discourage cloning (it cannot really be prevented)
                    if (paste.isBurnAfterReadingEnabled()) {
                        TopNav.hideBurnAfterReadingButtons();
                    } else {
                        // we have to pass in remaining_time here
                        TopNav.showEmailButton(
                            paste.getTimeToLive(),
                            paste.isBurnAfterReadingEnabled()
                        );
                    }

                    // only offer adding comments, after document was successfully decrypted
                    if (paste.isDiscussionEnabled()) {
                        DiscussionViewer.finishDiscussion();
                    }

                })
                .catch((err) => {
                    // wait for the user to type in the password,
                    // then PasteDecrypter.run will be called again
                    Alert.showError(err);
                });
        };

        return me;
    })();

    /**
     *
     * @name CopyToClipboard
     * @class
     */
    const CopyToClipboard = (function () {
        const me = {};

        let copyButton,
            copyLinkButton,
            shortcutHint,
            url;

        /**
         * Handle copy to clipboard button click
         *
         * @name CopyToClipboard.handleCopyButtonClick
         * @private
         * @function
         */
        function handleCopyButtonClick() {
            if (!copyButton) return;

            copyButton.addEventListener('click', function () {
                const text = PasteViewer.getText();
                saveToClipboard(text);

                showAlertMessage('Document copied to clipboard');
            });
        }

        /**
         * Handle copy link to clipboard button click
         *
         * @name CopyToClipboard.handleCopyLinkButtonClick
         * @private
         * @function
         */
        function handleCopyLinkButtonClick() {
            if (!copyLinkButton) return;

            copyLinkButton.addEventListener('click', function () {
                saveToClipboard(url);

                showAlertMessage('Link copied to clipboard');
            });
        }

        /**
         * Handle CTRL+C/CMD+C keyboard shortcut
         *
         * @name CopyToClipboard.handleKeyboardShortcut
         * @private
         * @function
         */
        function handleKeyboardShortcut() {
            document.addEventListener('copy', function () {
                if (!isUserSelectedTextToCopy()) {
                    const text = PasteViewer.getText();
                    saveToClipboard(text);

                    showAlertMessage('Document copied to clipboard');
                }
            });
        }

        /**
         * Check if user selected some text on the page to copy it
         *
         * @name CopyToClipboard.isUserSelectedTextToCopy
         * @private
         * @function
         * @returns {boolean}
         */
        function isUserSelectedTextToCopy() {
            let text = '';

            if (window.getSelection) {
                text = window.getSelection().toString();
            } else if (document.selection && document.selection.type !== 'Control') {
                text = document.selection.createRange().text;
            }

            return text.length > 0;
        }

        /**
         * Save text to the clipboard
         *
         * @name CopyToClipboard.saveToClipboard
         * @private
         * @param {string} text
         * @function
         */
        function saveToClipboard(text) {
            navigator.clipboard.writeText(text);
        }

        /**
         * Show alert message after text copy
         *
         * @name CopyToClipboard.showAlertMessage
         * @private
         * @param {string} message
         * @function
         */
        function showAlertMessage(message) {
            Alert.showStatus(message);
        }

        /**
         * Show keyboard shortcut hint
         *
         * @name CopyToClipboard.showKeyboardShortcutHint
         * @function
         */
        me.showKeyboardShortcutHint = function () {
            shortcutHint.classList.remove('hidden');
        };

        /**
         * Hide keyboard shortcut hint
         *
         * @name CopyToClipboard.showKeyboardShortcutHint
         * @function
         */
        me.hideKeyboardShortcutHint = function () {
            shortcutHint.classList.add('hidden');
        };

        /**
         * Set document url
         *
         * @name CopyToClipboard.setUrl
         * @param {string} newUrl
         * @function
         */
        me.setUrl = function (newUrl) {
            url = newUrl;
        };

        /**
         * Initialize
         *
         * @name CopyToClipboard.init
         * @function
         */
        me.init = function () {
            copyButton = document.getElementById('copyShortcutHintBtn');
            copyLinkButton = document.getElementById('copyLink');
            shortcutHint = document.getElementById('copyShortcutHint');

            handleCopyButtonClick();
            handleCopyLinkButtonClick();
            handleKeyboardShortcut();
        };

        return me;
    })();

    /**
     *
     * @name PasswordPeek
     * @class
     */
    const PasswordPeek = (function () {
        const me = {};

        /**
         * Switch between visible and hidden password
         *
         * @name PasswordPeek.handleRevealButtonClick
         * @private
         * @function
         */
        function handleRevealButtonClick() {
            const element = this;
            const inputGroup = element.closest('.input-group');
            const passwordInput = inputGroup ? inputGroup.querySelector('.input-password') : null;
            if (!passwordInput) {
                return;
            }

            const isHidden = passwordInput.getAttribute('type') === 'password';
            passwordInput.setAttribute('type', isHidden ? 'text' : 'password');

            const tooltip = I18n._(isHidden ? 'Hide password' : 'Show password');
            element.setAttribute('title', tooltip);
            element.setAttribute('aria-label', tooltip);

            // handle bootstrap 5 icons: eye & eye-slash
            const buttonSvg = element.querySelector('use');
            if (buttonSvg) {
                const iconHref = buttonSvg.getAttribute('href');
                if (iconHref) {
                    buttonSvg.setAttribute('href', isHidden ? `${iconHref}-slash` : iconHref.substring(0, iconHref.length - 6));
                }
                return;
            }

            // handle bootstrap 3 icons: eye-open & eye-close
            const buttonSpan = element.querySelector('span');
            if (buttonSpan) {
                if (isHidden) {
                    buttonSpan.classList.add('glyphicon-eye-close');
                    buttonSpan.classList.remove('glyphicon-eye-open');
                } else {
                    buttonSpan.classList.add('glyphicon-eye-open');
                    buttonSpan.classList.remove('glyphicon-eye-close');
                }
            }
        }

        /**
         * Initialize
         *
         * @name PasswordPeek.init
         * @function
         */
        me.init = function () {
            const revealButton = document.querySelector('.toggle-password');
            if (!revealButton) {
                return;
            }
            revealButton.addEventListener('click', handleRevealButtonClick);
        };

        return me;
    })();

    /**
     * (controller) main PrivateBin logic
     *
     * @name   Controller
     * @param  {object} window
     * @param  {object} document
     * @class
     */
    const Controller = (function (window, document) {
        const me = {};

        /**
         * hides all status messages no matter which module showed them
         *
         * @name   Controller.hideStatusMessages
         * @function
         */
        me.hideStatusMessages = function () {
            PasteStatus.hideMessages();
            Alert.hideMessages();
            CopyToClipboard.hideKeyboardShortcutHint();
        };

        /**
         * creates a new document
         *
         * @name   Controller.newPaste
         * @function
         */
        me.newPaste = function () {
            // Important: This *must not* run Alert.hideMessages() as previous
            // errors from viewing a document should be shown.
            TopNav.hideAllButtons();
            Alert.showLoading('Preparing new document…', 'time');

            PasteStatus.hideMessages();
            PasteViewer.hide();
            Editor.resetInput();
            Editor.show();
            Editor.focusInput();
            AttachmentViewer.removeAttachment();
            TopNav.resetInput();

            // reset format
            PasteViewer.setFormat('plaintext');
            TopNav.setFormat('plaintext');

            TopNav.showCreateButtons();

            // newPaste could be called when user is on document clone editing view
            TopNav.hideCustomAttachment();
            AttachmentViewer.clearDragAndDrop();
            AttachmentViewer.removeAttachmentData();

            Alert.hideLoading();
            // only push new state if we are coming from a different one
            if (Helper.baseUri() !== window.location) {
                history.pushState({ type: 'create' }, document.title, Helper.baseUri());
            }

            // clear discussion
            DiscussionViewer.prepareNewDiscussion();
        };

        /**
         * shows the loaded document
         *
         * @name   Controller.showPaste
         * @function
         */
        me.showPaste = function () {
            try {
                Model.getPasteKey();
            } catch (err) {
                console.error(err);
                Alert.showError('Cannot decrypt document: Decryption key missing in URL (Did you use a redirector or an URL shortener which strips part of the URL?)');
                return;
            }

            // check if we should request loading confirmation
            if (window.location.hash.startsWith(loadConfirmPrefix)) {
                Prompt.requestLoadConfirmation();
                return;
            }

            // show proper elements on screen
            PasteDecrypter.run();
        };

        /**
         * refreshes the loaded document to show potential new data
         *
         * @name   Controller.refreshPaste
         * @function
         * @param  {function} callback
         */
        me.refreshPaste = function (callback) {
            // save window position to restore it later
            const orgPosition = window.scrollY;

            Model.getPasteData(function (data) {
                ServerInteraction.prepare();
                ServerInteraction.setUrl(Helper.baseUri() + '?pasteid=' + Model.getPasteId());

                ServerInteraction.setFailure(function (status, data) {
                    // revert loading status…
                    Alert.hideLoading();
                    TopNav.showViewButtons();

                    // show error message
                    Alert.showError(
                        ServerInteraction.parseUploadError(status, data, 'refresh display')
                    );
                });
                ServerInteraction.setSuccess(function (status, data) {
                    PasteDecrypter.run(new Paste(data));

                    // NOTE: callback needs to be called (with setTimeout) after a JS
                    // rendering cycle, as otherwise it would be called before the new content
                    // is actually rendered, which would cause problems when trying to e.g.
                    // highlight a comment right after refreshing the document, as the comment would not be in the DOM at that time.
                    // For scrolling, more timeout is used.
                    setTimeout(() => {
                        // restore position instantly (as the process should be instantly)
                        window.scrollTo({
                            top: orgPosition,
                            behavior: 'instant'
                        });

                        callback();
                    }, 10);
                });
                ServerInteraction.run();
            }, false); // this false is important as it circumvents the cache
        };

        /**
         * clone the current document
         *
         * @name   Controller.clonePaste
         * @function
         */
        me.clonePaste = function () {
            TopNav.collapseBar();
            TopNav.hideAllButtons();

            // hide messages from previous document
            me.hideStatusMessages();

            // erase the id and the key in url
            history.pushState({ type: 'clone' }, document.title, Helper.baseUri());

            if (AttachmentViewer.hasAttachment()) {
                const attachments = AttachmentViewer.getAttachments();
                attachments.forEach(attachment => {
                    AttachmentViewer.moveAttachmentTo(
                        TopNav.getCustomAttachment(),
                        attachment,
                        'Cloned: \'%s\''
                    );
                });
                TopNav.hideFileSelector();
                AttachmentViewer.hideAttachment();
                // NOTE: it also looks nice without removing the attachment
                // but for a consistent display we remove it…
                AttachmentViewer.hideAttachmentPreview();
                TopNav.showCustomAttachment();

                // show another status messages to make the user aware that the
                // files were cloned too!
                Alert.showStatus(
                    [
                        'The cloned file \'%s\' was attached to this document.',
                        attachments.map(attachment => attachment[1]).join(', ')
                    ],
                    'copy'
                );
            }

            Editor.setText(PasteViewer.getText());
            // also clone the format
            TopNav.setFormat(PasteViewer.getFormat());
            PasteViewer.hide();
            Editor.show();

            TopNav.showCreateButtons();

            // clear discussion
            DiscussionViewer.prepareNewDiscussion();
        };

        /**
         * try initializing zlib or display a warning if it fails,
         * extracted from main init to allow unit testing
         *
         * @name   Controller.initZlib
         * @function
         */
        me.initZlib = function () {
            z = zlib.catch(function () {
                if (document.body.dataset.compression !== 'none') {
                    Alert.showWarning('Your browser doesn\'t support WebAssembly, used for zlib compression. You can create uncompressed documents, but can\'t read compressed ones.');
                }
            });
        };

        /**
         * application start
         *
         * @name   Controller.init
         * @function
         */
        me.init = function () {
            // first load translations
            I18n.loadTranslations();

            // Add a hook to make all links open a new window
            DOMPurify.addHook('afterSanitizeAttributes', function (node) {
                // set all elements owning target to target=_blank
                if ('target' in node && node.id !== 'pasteurl') {
                    node.setAttribute('target', '_blank');
                }
                // set non-HTML/MathML links to xlink:show=new
                if (!node.hasAttribute('target')
                    && (node.hasAttribute('xlink:href')
                        || node.hasAttribute('href'))) {
                    node.setAttribute('xlink:show', 'new');
                }
                if ('rel' in node) {
                    node.setAttribute('rel', 'nofollow noopener noreferrer');
                }
            });

            // initialize other modules/"classes"
            Alert.init();
            Model.init();
            AttachmentViewer.init();
            DiscussionViewer.init();
            Editor.init();
            PasteStatus.init();
            PasteViewer.init();
            Prompt.init();
            TopNav.init();
            UiHelper.init();
            CopyToClipboard.init();
            PasswordPeek.init();

            // check for legacy browsers before going any further
            if (!Legacy.Check.getInit()) {
                // Legacy check didn't complete, wait and try again
                setTimeout(init, 500);
                return;
            }
            if (!Legacy.Check.getStatus()) {
                // something major is wrong, stop right away
                return;
            }
            me.initZlib();

            // if delete token is passed (i.e. document has been deleted by this
            // access), add an event listener for the 'new' document button in the alert
            if (Model.hasDeleteToken()) {
                const newFromAlert = document.getElementById('new-from-alert');
                if (newFromAlert) {
                    newFromAlert.addEventListener('click', function () {
                        UiHelper.reloadHome();
                    });
                }
                return;
            }

            // check whether existing document needs to be shown
            try {
                Model.getPasteId();
            } catch (e) {
                // otherwise create a new document
                return me.newPaste();
            }

            // always reload on back button to invalidate cache (protect burn after read document)
            window.addEventListener('popstate', () => {
                window.location.reload();
            });

            // display an existing document
            return me.showPaste();
        };

        return me;
    })(window, document);

    return {
        Helper: Helper,
        I18n: I18n,
        CryptTool: CryptTool,
        Model: Model,
        UiHelper: UiHelper,
        Alert: Alert,
        PasteStatus: PasteStatus,
        Prompt: Prompt,
        Editor: Editor,
        PasteViewer: PasteViewer,
        AttachmentViewer: AttachmentViewer,
        DiscussionViewer: DiscussionViewer,
        TopNav: TopNav,
        ServerInteraction: ServerInteraction,
        PasteEncrypter: PasteEncrypter,
        PasteDecrypter: PasteDecrypter,
        PasswordPeek: PasswordPeek,
        CopyToClipboard: CopyToClipboard,
        Controller: Controller
    };
})();

// main application start, called when DOM is fully loaded
// skip auto-initialization in test environments (Node.js)
if (typeof module === 'undefined' || !module.exports) {
    window.addEventListener('DOMContentLoaded', function () {
        // run main controller
        window.PrivateBin.Controller.init();
    });
}