<template>
    <div class="about-wrapper">
        <div class="usermanual">
            <h2>{{ t('usermanual') }}</h2>
            <div class="usermanual-item">
                <div><span class="iconfont icon-mouse"/><span class="iconfont icon-up-down"/></div>
                <div>{{ t('usermanual.left-right-scroll.caption') }}</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-mouse"/><span class="iconfont icon-left-right"/></div>
                <div>{{ t('usermanual.up-down-scroll.caption') }}</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-ctrl"/> + <span class="iconfont icon-mouse"/><span class="iconfont icon-up-down"/></div>
                <div>{{ t('usermanual.xscale.caption') }}</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-shift"/> + <span class="iconfont icon-mouse"/><span class="iconfont icon-up-down"/></div>
                <div>{{ t('usermanual.up-down-scroll.caption') }}</div>
            </div>

            <div class="usermanual-item" v-if="platform.startsWith('Mac')">
                <div><span class="iconfont icon-command"/> + <span class="iconfont icon-mouse"/><span class="iconfont icon-up-down"/></div>
                <div>{{ t('usermanual.xscale.caption') }}</div>
            </div>
            <div class="usermanual-item" v-else>
                <div><span class="iconfont icon-ctrl"/> + <span class="iconfont icon-equal"/> / <span class="iconfont icon-minus"/></div>
                <div>{{ t('usermanual.xscale.caption') }}</div>
            </div>

            <div class="usermanual-item">
                <div><span class="iconfont icon-shift"/> + <span class="iconfont icon-arrow-up"/> / <span class="iconfont icon-arrow-down"/></div>
                <div>{{ t('usermanual.left-right-scroll.caption') }}</div>
            </div>

            <div class="usermanual-item">
                <div><span class="iconfont icon-shift"/> + <span class="iconfont icon-arrow-left"/> / <span class="iconfont icon-arrow-right"/></div>
                <div>{{ t('usermanual.up-down-scroll.caption') }}</div>
            </div>


        </div>
        
        <br>
        <hr>
        <br>

        <div class="icon-caption" @click="goto('https://github.com/Digital-EDA')">
            <div class="digital-ide-icon big"/>
        </div>
        <div class="version-caption">
            <span>{{ t('current-version') }} &ensp; <span class="version-wrapper">0.4.0</span></span>
        </div>
        <br>
        <div style="display: flex;justify-content: space-around;">
            <div class="copyright-caption" v-html="t('copyright')"></div>
        </div>
    </div>
</template>


<script>
import { useI18n } from 'vue-i18n';

export default {
    name: 'dide-about',
    setup() {
        function goto(url) {
            window.open(url, '_blank');
        }

        const platform = navigator.platform;

        const { t } = useI18n();

        return {
            goto,
            t,
            platform
        }
    }
}
</script>

<style>
.about-wrapper {
    margin-top: 10px;
    width: 450px;
}

.version-caption {
    display: flex;
    width: 100% !important;
    font-size: 1.1rem;
    padding: 10px;
    margin: 10px;
    align-items: center;
    justify-content: space-evenly;
}

.copyright-caption {
    width: 50% !important;
    line-height: 30px;
    font-size: 0.9rem;
    padding: 10px;
    margin: 10px;
    align-items: center;
}

.icon-caption {
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}

.version-wrapper {
    border-radius: .5em;
    color: white;
    background-color: var(--color-deepPurple);
    padding: 5px;
}

.usermanual {
    margin: 10px;
    margin-top: 0;
    padding: 10px;
    padding-top: 0;
}

.usermanual-item {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    margin: 5px;
    font-size: 0.9rem;
}

.usermanual-item .iconfont {
    font-size: 1.1rem !important;
    color: var(--sidebar-text-item);
}
</style>