<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1"/>
    <title>LocalStorageList</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="app">
    <!--version 4.0.0-2 -->
    <div class="container" v-cloak>
        <!-- debug -->
        <div v-if="false">
        <h4>DEBUG</h4>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>bookId</th>
                <th>title</th>
                <th>url</th>

            </tr>
            </thead>
            <tbody>
            <tr v-for="info in infos">
                <td>{{info.bookId}}</td>
                <td>{{info.title}}</td>
                <td>{{info.url}}</td>

            </tr>
            </tbody>
        </table>
        </div>

        <h4>LocalStorage Manager</h4>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>#</th>
                <th>Book</th>
                <th>Type</th>
                <th>Volume</th>
                <th>Remove</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="k in flStorageList">
                <td>{{$index+1}}</td>
                <td><a v-bind:href="k.url" target="_blank">{{k.title}}</a></td>
                <td>{{k.type}}</td>
                <td>{{k.size}}KB</td>
                <td><a class="btn btn-small btn-error" v-on:click="onRemoveClick($index)">Remove</a></td>
            </tr>
            </tbody>
        </table>

        <div class="row" v-if="isDisplayAddLocalStorage">
            <div class="col md-5">
                <label>Input</label>
                <input class="form-control" type="text" v-model="keyName" placeholder="KeyName">
            </div>

            <div class="col md-5">
                <label>Input</label>
                <select v-model="selected" class="form-control">
                    <option v-for="n in options">{{n}}</option>
                </select>
            </div>
            <div class="col md-2">
                <label>Input</label>
                <!--<button v-on:click="writeLocalStorage">write</button>-->
                <a class="btn" v-on:click="writeLocalStorage">Write</a>
            </div>
        </div>

        <a href="./index.html">back</a>

    </div>



<script src="./flipper3js/lslist.js"></script>
</body>
</html>