@using Newtonsoft.Json
@model StardewModdingAPI.Web.ViewModels.ModListModel
@{
    ViewData["Title"] = "SMAPI mod compatibility";
}
@section Head {
    <link rel="stylesheet" href="~/Content/css/mods.css?r=20181122" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.0/dist/js/jquery.tablesorter.combined.min.js" crossorigin="anonymous"></script>
    <script src="~/Content/js/mods.js?r=20181122"></script>
    <script>
        $(function() {
            var data = @Json.Serialize(Model.Mods, new JsonSerializerSettings { Formatting = Formatting.None });
            smapi.modList(data);
        });
    </script>
}

<div id="intro">
    <p>This page lists all known SMAPI mods, whether they're compatible with the latest versions of Stardew Valley and SMAPI, and how to fix broken mods if possible. The list is updated every few days. (You can help <a href="https://stardewvalleywiki.com/Modding:SMAPI_compatibility">edit this list</a>!)</p>

    <p>If a mod doesn't work after following the instructions below, check <a href="https://stardewvalleywiki.com/Modding:Player_Guide/Troubleshooting">the troubleshooting guide</a> or <a href="https://stardewvalleywiki.com/Modding:Player_Guide/Troubleshooting#Ask_for_help">ask for help</a>.</p>

    @if (Model.BetaVersion != null)
    {
        <p id="beta-blurb"><strong>Note:</strong> "SDV beta only" means Stardew Valley @Model.BetaVersion-beta; if you didn't opt in to the beta, you have the stable version and can ignore that line. If a mod doesn't have a "SDV beta only" line, the compatibility applies to both versions of the game.</p>
    }
</div>

<div id="app">
    <div id="options">
        <div>
            <label for="search-box">Search: </label>
            <input type="text" id="search-box" v-model="search" v-on:input="applyFilters" />
        </div>
        <div id="filter-area">
            <input type="checkbox" id="show-advanced" v-model="showAdvanced" />
            <label for="show-advanced">show advanced info and options</label>
            <div id="filters" v-show="showAdvanced">
                <div v-for="(filterGroup, key) in filters">
                    {{key}}: <span v-for="filter in filterGroup" v-bind:class="{ active: filter.value }"><input type="checkbox" v-bind:id="filter.id" v-model="filter.value" v-on:change="applyFilters" /> <label v-bind:for="filter.id">{{filter.label}}</label></span>
                </div>
            </div>
        </div>
    </div>
    <div id="mod-count" v-show="showAdvanced">
        <div v-if="visibleStats.total > 0">
            {{visibleStats.total}} mods shown ({{Math.round((visibleStats.compatible + visibleStats.workaround) / visibleStats.total * 100)}}% compatible or have a workaround, {{Math.round((visibleStats.soon + visibleStats.broken) / visibleStats.total * 100)}}% broken, {{Math.round(visibleStats.abandoned / visibleStats.total * 100)}}% obsolete).<br />
            SMAPI 3.0 (upcoming): {{Math.round(visibleStats.smapi3_ok / visibleStats.total * 100)}}% ready, {{Math.round(visibleStats.smapi3_soon / visibleStats.total * 100)}}% soon, {{Math.round(visibleStats.smapi3_broken / visibleStats.total * 100)}}% broken, {{Math.round(visibleStats.smapi3_unknown / visibleStats.total * 100)}}% unknown.
        </div>
        <span v-else>No matching mods found.</span>
    </div>
    <table class="wikitable" id="mod-list">
        <thead>
            <tr>
                <th>mod name</th>
                <th>links</th>
                <th>author</th>
                <th>compatibility</th>
                <th v-show="showAdvanced">broke in</th>
                <th v-show="showAdvanced">code</th>
                <th v-show="showAdvanced"><a href="http://smapi.io/3.0">3.0</a></th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="mod in mods" :key="mod.Name" v-bind:id="mod.Slug" :key="mod.Slug" v-bind:data-status="mod.LatestCompatibility.Status" v-show="mod.Visible">
                <td>
                    {{mod.Name}}
                    <small class="mod-alt-names" v-if="mod.AlternateNames">(aka {{mod.AlternateNames}})</small>
                </td>
                <td class="mod-page-links">
                    <span v-for="(link, i) in mod.ModPages">
                        <a v-bind:href="link.Url">{{link.Text}}</a>{{i < mod.ModPages.length - 1 ? ', ' : ''}}
                    </span>
                </td>
                <td>
                    {{mod.Author}}
                    <small class="mod-alt-authors" v-if="mod.AlternateAuthors">(aka {{mod.AlternateAuthors}})</small>
                </td>
                <td>
                    <div v-html="mod.Compatibility.Summary"></div>
                    <div v-if="mod.BetaCompatibility">
                        <strong v-if="mod.BetaCompatibility">SDV beta only:</strong>
                        <span v-html="mod.BetaCompatibility.Summary"></span>
                    </div>
                    <div v-for="(warning, i) in mod.Warnings">⚠ {{warning}}</div>
                </td>
                <td class="mod-broke-in" v-html="mod.LatestCompatibility.BrokeIn" v-show="showAdvanced"></td>
                <td v-show="showAdvanced">
                    <span v-if="mod.SourceUrl"><a v-bind:href="mod.SourceUrl">source</a></span>
                    <span v-else class="mod-closed-source">no source</span>
                </td>
                <td v-show="showAdvanced">
                    <template v-if="mod.LatestCompatibility.Status == 'ok' || mod.LatestCompatibility.Status == 'unofficial' || mod.Smapi3Status == 'ok' || mod.Smapi3Status == 'soon'">
                        <small v-if="mod.Smapi3Status == 'ok'">✓</small>
                        <small v-else-if="mod.Smapi3Status == 'broken'">✖</small>
                        <small v-else-if="mod.Smapi3Status == 'soon' && mod.Smapi3Url"><a v-bind:href="mod.Smapi3Url">↻ soon</a></small>
                        <small v-else>↻ {{mod.Smapi3Status}}</small>
                    </template>
                </td>
                <td>
                    <small><a v-bind:href="'#' + mod.Slug">#</a></small>
                </td>
            </tr>
        </tbody>
    </table>
</div>