View source for Widget:UseCaseList

<noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">Currently in use &ndash; do not modify!</strong>
</noinclude>
<includeonly>
    <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
    <style>
        #usecase-list-wrapper {
            font-family: 'Open Sans';
            margin-top: 4em;
        }

        #usecase-list-wrapper h1,
        #usecase-list-wrapper h2,
        #usecase-list-wrapper h3,
        #usecase-list-wrapper h4 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }

        #usecase-list-wrapper h1,
        #usecase-filters h2 {
            color: var(--links-cyan);
            display: flex;
            align-items: center;
        }

        #usecase-list-wrapper h1 svg {
            height: 2.5em;
            width: 2.5em;
            fill: var(--links-cyan);
            margin-right: .5em;
        }

        #filter-bar {
            position: relative;
            margin: 1em 0 2em 0;
        }

        #uc-filters {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 100;
            padding: 2em;
            width: 45vw;
            background: #fff;
            border: 1px solid var(--links-cyan);
            clip-path: inset(0 0 100% 100%);
            box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
            transition: all 400ms ease-in-out;
        }

        #uc-filters.open {
            clip-path: inset(0 0 -50px -50px);
        }

        #close-filter-button {
            display: block;
            cursor: pointer;
            font-size: 2.5em;
            line-height: .7em;
            margin-top: -.2em;
            font-weight: 100;
            color: var(--links-cyan);
        }

        #uc-filters h2 svg {
            height: 1.5em;
            width: 1.5em;
            margin-right: .5em;
            margin-left: -.2em;
        }

        .large-button {
            border: 1px solid var(--links-cyan);
            font-size: 1.5em;
            font-family: 'Open Sans';
            font-weight: 100;
            margin-bottom: 2em;
            padding: 0.3em 0.8em;
            color: var(--links-cyan);
            background: transparent;
            font-variant: small-caps;
            display: inline-block;
            transition: all 200ms ease-in-out;
        }

        .large-button:hover {
            background-color: var(--links-cyan);
            color: #fff;
        }

        #usecases-list-wrapper h2 {
            margin-bottom: 1em;
        }

        .filter-button-wrapper {
            margin-bottom: 1em;
        }

        .filter-wrapper button {
            border: 0 none;
            color: var(--links-cyan);
            background-color: transparent;
            font-variant: small-caps;
            font-size: 1.2em;
            text-decoration: underline;
            padding: 0;
        }

        .filter-wrapper .filter-container {
            display: none;
        }

        .filter-wrapper.open .filter-container {
            display: block;
        }

        .filter-wrapper .filter-toggle {
            cursor: pointer;
        }

        .filter-wrapper.open .plus.icon::after {
            transform: rotate(0);
        }

        .filter-content {
            font-size: 1.2em;
            margin-bottom: 2em;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
            align-items: start;
        }

        .filter-content.loose {
            gap: .5em .5em;
        }

        .filter-group-header {
            grid-column: 1/-1;
            margin-bottom: -.5em;
            margin-top: 1em;
            font-family: 'Raleway';
            font-weight: 200;
            letter-spacing: .06em;
        }

        .filter-group-start {
            grid-column-start: 1;
        }

        .filter-content input[type="checkbox"] {
            margin-right: .5em;
        }

        .filter-content img {
            width: 2em;
            height: 2em;
            margin: 0 .5em 0 0;
        }

        .filter-content label {
            display: inline;
        }

        #usecase-intro {
            font-size: larger;
            margin-bottom: 4em;
        }

        #usecase-intro ul {
            font-size: initial;
        }

        #usecase-tabulator.tabulator {
            border: 0 none;
            background-color: transparent;
            font-size: 1.2em;
        }

        #usecase-tabulator.tabulator .tabulator-header {
            background-color: transparent;
            border: 0 none;
        }

        #usecase-tabulator.tabulator .tabulator-header .tabulator-col {
            border-bottom: 4px double var(--links-cyan);
            border-right: 0 none;
            background: transparent;
        }

        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-content {
            padding: .5em 0;
        }

        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-sorter {
            right: .5em;
        }

        #usecase-tabulator.tabulator .tabulator-row {
            background-color: transparent;
        }

        #usecase-tabulator.tabulator .tabulator-cell {
            border-right: 0 none;
            border-top: 1px solid var(--links-cyan);
            padding: .5em .5em .5em 0;
        }

        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse {
            border: 0 none;
            padding: 0 .5em 2em 0;
        }

        #filter-summary {
            margin-right: 1em;
        }

        #filter-summary table tr td {
            vertical-align: top;
        }

        #filter-summary table tr td:first-of-type {
            padding-right: 10px;
        }


        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
            font-size: smaller;
        }

        #filter-summary table tr td strong,
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse td>strong {
            font-weight: 300;
        }

        #usecase-tabulator.tabulator .usecase-title {
            white-space: normal !important;
        }

        #usecase-tabulator.tabulator .usecase-title a,
        #usecase-tabulator.tabulator .tabulator-responsive-collapse table a {
            color: var(--links-cyan);
        }

        .uc-summary {
            font-size: smaller;
            padding-bottom: 1em;
        }
    </style>
    <script>
        'use strict';

        /**
         * @typedef {Object} FilterState
         * @property {string[]} type
         * @property {string[]} eventType
         * @property {string[]} category
         * @property {string[]} scale
         * @property {string[]} thematics
         * @property {string[]} phases
        */
        let table;  // Tabulator instance

        const PHASES = ["Before", "During", "After"];
        const EX_LEVEL = ["Starter", "Intermediate", "Advanced"];
        const SCALE = ["Country", "County", "City"];

        const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
        const escapeAttr = text => text ? text.replace(/\W/g, '-') : text;

        const PHASE_PROP = 'Disaster Management Phase';
        const THEME_PROP = 'Use cases thematic';
        const TYPE_PROP = 'Type';
        const YEAR_PROP = 'Year';
        const SCALE_PROP = 'Scale';
        const CAT_PROP = 'Use Cases Category';
        const EVENT_PROP = 'Event type';
        const SUMMARY_PROP = 'Description';
        const IMAGES_PROP = 'Other images';

        const useCaseQuery = '[[Category:Use Cases]]'
            + '|?' + PHASE_PROP
            + '|?' + THEME_PROP
            + '|?' + TYPE_PROP
            + '|?' + SCALE_PROP
            + '|?' + EVENT_PROP
            + '|?' + CAT_PROP
            + '|?' + SUMMARY_PROP
            + '|?' + IMAGES_PROP
            + '|?' + YEAR_PROP;

        async function getUseCases() {
            const useCasesResponse = await fetch(getQueryUrl(useCaseQuery)).then(response => response.json());

            console.log(useCasesResponse)

            return Object.keys(useCasesResponse.query.results).map(title => {
                const useCaseResult = useCasesResponse.query.results[title];

                /** @type {UseCase} **/
                const useCase = {};
                useCase.title = title;
                useCase.url = useCaseResult.fullurl;
                useCase[PHASE_PROP] = useCaseResult.printouts[PHASE_PROP].map(value => value.fulltext);
                useCase[THEME_PROP] = useCaseResult.printouts[THEME_PROP].map(value => value.fulltext);
                useCase[TYPE_PROP] = useCaseResult.printouts[TYPE_PROP].map(value => value.fulltext);
                useCase[CAT_PROP] = useCaseResult.printouts[CAT_PROP].map(value => value.fulltext);
                useCase[SCALE_PROP] = useCaseResult.printouts[SCALE_PROP].map(value => value.fulltext);
                useCase[EVENT_PROP] = useCaseResult.printouts[EVENT_PROP].map(value => value.fulltext);
                useCase[SUMMARY_PROP] = useCaseResult.printouts[SUMMARY_PROP][0];
                useCase[YEAR_PROP] = useCaseResult.printouts[YEAR_PROP][0] && useCaseResult.printouts[YEAR_PROP][0].raw.slice(-4);
                return useCase;
            });
        }

        function applyFilters(clear) {
            // TODO: apply Filters
            if (!table) return;

            // If clear=true, pass empty object to the filter to disable it.
            if (clear) {
                table.setFilter(useCaseFilter, {});
                return;
            }


            /** @type {FilterState} **/
            const filterState = {};

            const selectedTypes = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedTypes.length > 0) filterState.type = selectedTypes;

            const selectedEvents = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedEvents.length > 0) filterState.eventType = selectedEvents;

            const selectedCats = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedCats.length > 0) filterState.category = selectedCats;

            const selectedScales = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedScales.length > 0) filterState.scale = selectedScales;

            const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedThematics.length > 0) filterState.thematics = selectedThematics;

            const selectedPhases = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedPhases.length > 0) filterState.phases = selectedPhases;

            table.setFilter(useCaseFilter, filterState);
        }


        /**
         * @param {Guideline} useCase
         * @param {FilterState} filterState
         */
        function useCaseFilter(useCase, filterState) {
            // If filtering property is empty, don't apply the filter (set the check to true).
            // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.

            const typeCheck = filterState.type
                ? filterState.type.every(type => useCase[TYPE_PROP].includes(type))
                : true;
            const eventTypeCheck = filterState.eventType
                ? filterState.eventType.every(event => useCase[EVENT_PROP].includes(event))
                : true;
            const categoryCheck = filterState.category
                ? filterState.category.every(cat => useCase[CAT_PROP].includes(cat))
                : true;
            const scaleCheck = filterState.scale
                ? filterState.scale.every(scale => useCase[SCALE_PROP].includes(scale))
                : true;
            const thematicCheck = filterState.thematics
                ? filterState.thematics.every(thematic => useCase[THEME_PROP].includes(thematic))
                : true;
            const phaseCheck = filterState.phases
                ? filterState.phases.every(phase => useCase[PHASE_PROP].includes(phase))
                : true;
            return typeCheck && eventTypeCheck && categoryCheck && scaleCheck && thematicCheck && phaseCheck;
        }

        Promise.all([getUseCases()]).then(data => {
            const useCases = data[0];
            console.log(useCases)

            let THEME_VALUES = []
            let TYPE_VALUES = [];
            let EVENT_VALUES = []
            let CAT_PROP_VALUES = [];
            let SCALE_VALUES = [];
            let YEAR_VALUES = [];
            let PHASE_VALUES = [];

            for (const useCase of useCases) {

                TYPE_VALUES = TYPE_VALUES.concat(useCase[TYPE_PROP]);
                THEME_VALUES = THEME_VALUES.concat(useCase[THEME_PROP]);
                EVENT_VALUES = EVENT_VALUES.concat(useCase[EVENT_PROP]);
                SCALE_VALUES = SCALE_VALUES.concat(useCase[SCALE_PROP]);
                CAT_PROP_VALUES = CAT_PROP_VALUES.concat(useCase[CAT_PROP]);
                YEAR_VALUES = YEAR_VALUES.concat(useCase[YEAR_PROP]);
            }

            TYPE_VALUES = TYPE_VALUES.sort();
            THEME_VALUES = THEME_VALUES.sort();
            EVENT_VALUES = EVENT_VALUES.sort();
            SCALE_VALUES = SCALE_VALUES.sort();
            CAT_PROP_VALUES = CAT_PROP_VALUES.sort();

            TYPE_VALUES = new Set(TYPE_VALUES);
            THEME_VALUES = new Set(THEME_VALUES);


            console.log("Theme values", THEME_VALUES);

            EVENT_VALUES = new Set(EVENT_VALUES);
            CAT_PROP_VALUES = new Set(CAT_PROP_VALUES);
            YEAR_VALUES = new Set(YEAR_VALUES);
            SCALE_VALUES = new Set(SCALE_VALUES);
            PHASE_VALUES = PHASES;

            let typeHtml = Array.from(TYPE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('type-filter').innerHTML = typeHtml;

            let eventTypeHtml = Array.from(EVENT_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="event-type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="event-type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('event-type-filter').innerHTML = eventTypeHtml;

            let categoryHtml = Array.from(CAT_PROP_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="category-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="category-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('category-filter').innerHTML = categoryHtml;

            let scaleHtml = SCALE.reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="scale-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="scale-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('scale-filter').innerHTML = scaleHtml;

            let phaseHtml = Array.from(PHASE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="phases-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="phases-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('phases-filter').innerHTML = phaseHtml;

            let thematicHtml = Array.from(THEME_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="thematic-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('thematic-filter').innerHTML = thematicHtml;


            const tabulator = new Tabulator('#usecase-tabulator', {
                data: useCases,
                layout: 'fitDataFill',
                responsiveLayout: 'collapse',
                columns: [
                    {
                        title: 'Title',
                        field: 'title',
                        cssClass: 'usecase-title',
                        formatter: function (cell) {
                            let out = '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>';
                            out += '<div class="uc-summary">' + cell.getData()[SUMMARY_PROP] + '</div>';
                            return out;
                        },
                        maxWidth: '800px'
                    },
                    {
                        title: 'Year',
                        field: YEAR_PROP,
                        minWidth: '200px'
                    },
                    {
                        title: 'Theme',
                        field: TYPE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Hazard',
                        field: EVENT_PROP,
                        formatter: cell => cell.getValue().join(', ') || '&mdash;'
                    },
                    {
                        title: 'Category',
                        field: CAT_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Scale',
                        field: SCALE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Thematic',
                        field: THEME_PROP,
                        formatter: function (cell) {
                            const val = cell.getValue();
                            if (val.length > 1) {
                                return cell.getValue().join("<br>")
                            }
                            return cell.getValue().join(', ')

                        }
                    },
                    {
                        title: 'Disaster Management Phase',
                        field: PHASE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    }

                ],
                initialSort: [
                    { column: 'title', dir: 'asc' }
                ]
            });

            tabulator.on('tableBuilt', () => {
                tabulator.redraw(true);
                table = tabulator;

                // Set up the table if parameter was passed.
                const params = new URLSearchParams(window.location.search);
                const encoded = params.get('do');

                if (encoded) {
                    const actions = JSON.parse(decodeURIComponent(atob(encoded)));
                    const filter = actions.filter;

                    if (filter) {
                        const thematic = filter[THEME_PROP];
                        if (thematic) {
                            Object.keys(thematic).forEach(theme => {
                                const box = document.getElementById('thematic-filter-' + escapeAttr(theme));
                                box.checked = !!thematic[theme];
                                box.dispatchEvent(new Event('change', { bubbles: true }));
                            });

                            document.getElementById('thematic-filter').closest('.filter-wrapper').classList.toggle('open');
                        }
                        
                        const type = filter[TYPE_PROP];
                        if (type) {
                            Object.keys(type).forEach(tp => {
                                const box = document.getElementById('type-filter-' + escapeAttr(tp));
                                box.checked = !!type[tp];
                                box.dispatchEvent(new Event('change', { bubbles: true }));
                            });

                            document.getElementById('type-filter').closest('.filter-wrapper').classList.toggle('open');
                        }

                        applyFilters();
                        toggleFilter();
                    }

                    // Further actions (e.g. open filter panel, etc.)
                    // ...
                }

            });
            tabulator.on('dataFiltered', (filters, rows) => {
                const summary = document.getElementById('filter-summary');
                const filter = filters[0];

                // Set result counter
                document.getElementById('result-count').textContent = rows.length;

                // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
                if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }

                // Update filter text.
                if (
                    !filter.type.type &&
                    !filter.type.eventType &&
                    !filter.type.category &&
                    !filter.type.scale &&
                    !filter.type.thematics &&
                    !filter.type.phases
                ) { summary.textContent = 'No filter. Showing all results.'; }
                else {
                    let summaryHtml = '<table>';
                    if (filter.type.type) {
                        summaryHtml += '<tr><td><strong>Theme</strong></td><td>'
                            + (filter.type.type.length > 0 ? filter.type.type.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.eventType) {
                        summaryHtml += '<tr><td><strong>Hazard</strong></td><td>'
                            + (filter.type.eventType.length > 0 ? filter.type.eventType.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.category) {
                        summaryHtml += '<tr><td><strong>Category</strong></td><td>'
                            + (filter.type.category.length > 0 ? filter.type.category.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.scale) {
                        summaryHtml += '<tr><td><strong>Scale</strong></td><td>'
                            + (filter.type.scale.length > 0 ? filter.type.scale.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.thematics) {
                        summaryHtml += '<tr><td><strong>Thematics</strong></td><td>'
                            + (filter.type.thematics.length > 0 ? filter.type.thematics.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.phases) {
                        summaryHtml += '<tr><td><strong>Phases</strong></td><td>'
                            + (filter.type.phases > 0 ? filter.type.phases.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    summaryHtml += '</table>';
                    summary.innerHTML = summaryHtml;
                }

            });

            // Listen for changes in filter checkbox state.

            document.getElementById('type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('event-type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('category-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('scale-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('thematic-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('phases-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });


            // Listen for clicks on filter toggles
            document.querySelectorAll('.filter-wrapper .filter-toggle').forEach(el => {
                const wrapper = el.closest('.filter-wrapper');
                el.addEventListener('click', event => void wrapper.classList.toggle('open'));
            });

            // Close filter pane when clicked outside of it.
            document.body.addEventListener('click', event => {
                const filterPane = document.getElementById('uc-filters');
                if (
                    filterPane.classList.contains('open') &&
                    !filterPane.contains(event.target) &&
                    event.target !== document.querySelector('#filter-bar .large-button')
                ) { filterPane.classList.remove('open'); }
            }, { passive: true });

            // Fix bug where the table is truncated to zero height despite having visible rows.
            tabulator.on('renderComplete', function () {
                // TODO: Check the bugfix for a possible infinite event loop.

                try {
                    const holderHeight = tabulator.rowManager.element.offsetHeight;
                    const tableHeight = tabulator.rowManager.tableElement.offsetHeight;
                    if (
                        holderHeight < tableHeight ||                           // table is truncated vertically (including zero-height)
                        holderHeight - tableHeight > window.screen.availHeight  // table is more than a screen longer than content
                    ) {
                        tabulator.redraw();
                    }
                } catch (ignore) { }
            });
            // End bugfix
        });

        function selectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
            applyFilters();
        }

        function deselectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
            applyFilters();
        }

        function clearFilters() {
            document.querySelectorAll('#uc-filters input[type="checkbox"]').forEach(checkbox => checkbox.checked = checkbox.defaultChecked);
            applyFilters(true);
        }

        function toggleFilter() {
            document.getElementById('uc-filters').classList.toggle('open');
        }
    </script>

    <div id="usecase-list-wrapper">
        <h1>
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
                <defs>
                    <clipPath id="uc">
                        <path d="M592 312h96v96h-96z" />
                    </clipPath>
                </defs>
                <g clip-path="url(#uc)" transform="translate(-592 -312)">
                    <path d="m648.783 351.102 1.99-.204 2.359 23.001-1.989.204Z" />
                    <path
                        d="M674 387h-6v-5h-8.093l-3.531-36.291A2.99 2.99 0 0 0 653.39 343h-26.658a2.991 2.991 0 0 0-2.985 2.7L620.1 382H612v5h-6v7h68Zm-48.263-41.1a1 1 0 0 1 .995-.9h26.658a.999.999 0 0 1 1 .9l3.51 36.1h-35.795ZM672 392h-64v-3h6v-5h52v5h6ZM639 326h2v12h-2ZM606 355h10v2h-10ZM664 355h10v2h-10ZM611.293 332.707l1.414-1.414 8 8-1.414 1.414ZM659.293 339.293l8-8 1.414 1.414-8 8Z" />
                </g>
            </svg>
            <div>
                <div>Use Cases</div>
                <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
                    Library</div>
            </div>
        </h1>
        <div id="usecase-intro">
            <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Use Cases Library is to collect experiences
                and use cases of how SMCS have been used or can be used in real world. This enables the opportunity to
                give disaster management organisations a concrete indication of how they can use SMCS in practice.</p>
        </div>

        <!-- FILTERS -->

        <div id="filter-bar">
            <div style="display: flex; justify-content: space-between;">
                <div style="flex: 1 1;">
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
                    <div id="filter-summary">No filter. Showing all results.</div>
                </div>
                <div>
                    <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button>
                </div>
            </div>

            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
                <div><a href="/index.php/Form:Use_Cases" style="font-size: 1.5em; font-variant:small-caps; color: var(--links-cyan)">Add new use case</a></div>
            </div>

            <div id="uc-filters">
                <h2 style="display: flex; justify-content: space-between;">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden"
                            viewBox="0 0 96 96">
                            <defs>
                                <clipPath id="b">
                                    <path d="M592 312h96v96h-96z" />
                                </clipPath>
                            </defs>
                            <g clip-path="url(#b)" transform="translate(-592 -312)">
                                <path
                                    d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
                            </g>
                        </svg>
                        <span>Filters</span>
                    </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                </h2>
                <div style="text-align: center;">
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Theme <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#type-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#type-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="type-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Hazard <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="event-type-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Category <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#category-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#category-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="category-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Scale <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#scale-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="scale-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Thematic <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="thematic-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="phases-filter"></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="usecase-tabulator"></div>

    </div>

</includeonly>