<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!--<meta name="description" content="">-->
    <!--<meta name="author" content="">-->
    <!--<link rel="icon" href="../../favicon.ico">-->

    <title id="title"></title>

    <!-- Bootstrap core CSS -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <style>
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        #actions {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

<div id="vueApp">
    <div class="container">
        <h1>{{pageText.updateTitle}}</h1>
        <p v-for="(msg, index) in pageText.updateMsg" >{{msg}}</p>
        <p>{{pageText.updateFailed.p1}} <a href="https://mycard.moe" target="_blank">{{pageText.updateFailed.p2}}</a> {{pageText.updateFailed.p3}}</p>
        <p id="actions">
            <button @click="onClose" type="button" class="btn btn-secondary">{{pageText.actions.close}}</button>
            <button @click="onUpdate" type="button" class="btn btn-primary">{{pageText.actions.update}}</button>
        </p>
    </div>
</div>

<script>
    const {ipcRenderer, remote} = require('electron');
    const lang = require('./lang.js')

    var app = new Vue({
        el: '#vueApp',
        created: function () {
            let locale = localStorage.getItem('locale') || remote.app.getLocale();
            if (locale.startsWith('zh-')) {
                locale = 'zh-CN'
            } else {
                locale = 'en-US'
            }
            this.pageText = lang['update'][locale]

            document.getElementById('title').innerHTML = this.pageText.pageTitle
        },
        methods: {
            onClose(){
                window.close()
            },
            onUpdate(){
                ipcRenderer.send('update')
            }
        },
        data: {
            message: 'Hello Vue!',
            pageText:{}
        }
    })

</script>
</body>
</html>

