<!doctype html>
<httml>
    <head>
        <style>
            html, body {
                font-family: monospace;
                font-size: 10pt;
            }
            .no-wrap {
                white-space: nowrap;
            }
            .ver {
                padding-right: 0.5em;
            }
        </style>

        <script src="https://cdn.jsdelivr.net/npm/ractive"></script>
        <script>
            let allCrashes = [];

            function len(o) {
                return o.length;
            }
            let days = [];
            let crashesByDay = {};
            let ractive = null;

            function sortCrashCmp(a, b) {
                let av = a.CrashLines[0];
                let bv = b.CrashLines[0];
                av = shortenCrashLine(av);
                bv = shortenCrashLine(bv)
                if (len(av) > len(bv)) {
                    return -1;
                }
                if (len(av) < len(bv)) {
                    return 1;
                }

                if (av > bv) {
                    return -1;
                }
                if (av < bv) {
                    return -1;
                }
                return 0;
            }

            function groupCrashesByDay() {
                crashesByDay = {};
                for (let crash of allCrashes) {
                    const day = crash.Day;
                    const a = crashesByDay[day] || [];
                    a.push(crash);
                    crashesByDay[day] = a;
                }
                days = Object.keys(crashesByDay);
                days.sort();
                days = days.reverse();
                for (let day of days) {
                    crashesByDay[day].sort(sortCrashCmp);
                }
            }

            function getCrashesByDay(day) {
                return crashesByDay[day];
            }
            function lenCrashesByDay(day) {
                return len(crashesByDay[day]);
            }
            function shortenCrashLine(s) {
                let parts = s.split(" ");
                parts.splice(0, 2);
                return parts.join(" ");
            }
            function shortenVer(s) {
                s = s.replace("Ver:", "");
                s = s.replace("pre-release", "");
                s = s.replace("64-bit", "");
                s = s.replace("  ", " ");
                return s;
            }
            fetch("/api/crashes")
            .then((response) => {
                return response.json();
            })
            .then((myjson) => {
                allCrashes = myjson.Crashes;
                groupCrashesByDay();
                ractive = new Ractive({
                    target: '#target',
                    template: '#template',
                    data: { 
                        days: days,
                        lenCrashesByDay: lenCrashesByDay,
                        getCrashesByDay: getCrashesByDay,
                        shortenCrashLine: shortenCrashLine,
                        shortenVer: shortenVer,
                    }
            });
            })           
        </script>
    </head>
    <body>
        <div id="target"></div>
        <script id="template" type="text/ractive">
            {{#each days as day}}
                <div style="padding-bottom: 1em;">{{day}} {{lenCrashesByDay(day)}}
                    <table>
                        {{#each getCrashesByDay(day) as crash}}
                        <tr>
                            <td class="ver">{{shortenVer(.Version)}}</td>
                            <td class="no-wrap">
                                <a href="/crash/{{.N}}">
                                    {{shortenCrashLine(.CrashLines[0])}}
                                </a>
                            </td>
                        </tr>
                    {{/each}}
                    </table>
                </div>
            {{/each}}
        </script>        
    </body>
</html>
