<head>
    <link rel="stylesheet" href="buefy.min.css">
    <script defer src="../assets/fa.js"></script>
</head>

<body onload="updateSize()" style="overflow: auto;">
    <div id="app">
        <progress v-if="showProgress" class="progress is-info" v-bind:value="progress" max="100">0 %</progress>
        <b-table v-if="resultsFound" class="is-fullwidth" :data="results" default-sort="s" default-sort-direction="desc"
            :striped="true" :paginated="true" :narrowed="true">
            <template slot-scope="props">
                <b-table-column field="text" label="Name" sortable>
                    <span v-bind:title="props.row.text">{{ props.row.text }}</span>
                </b-table-column>
                <b-table-column field="len" label="Size" sortable>
                    {{ props.row.length }}
                </b-table-column>
                <b-table-column field="s" label="Seed" numeric sortable>
                    {{ props.row.s }}
                </b-table-column>
                <b-table-column field="l" label="Leech" numeric sortable>
                    {{ props.row.l }}
                </b-table-column>
                <b-table-column field="id" label=" " e>
                    <span class="icon">
                        <a style="color: hsl(171, 100%, 41%)" v-bind:href="'magnet:?xt=urn:btih:' + props.row.id + '&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.internetwarriors.net%3A1337'">
                            <i class="fas fa-magnet"></i>
                        </a>
                    </span>
                </b-table-column>
            </template>
        </b-table>
    </div>
    <script src="../assets/vue-v2.6.11.js"></script>
    <script src="buefy-table.js"></script>
    <script src="main.js"></script>
</body>