<template>
    <div class="about-wrapper" :style="aboutWrapper">
        <div class="usermanual">
            <h2>{{ t('usermanual') }}</h2>
            <div class="usermanual-item">
                <div><span class="iconfont icon-single-click"/> + <span class="iconfont icon-mouse"/></div>
                <div>{{ t('usermanual.move-view') }}</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-wheel-change"/></div>
                <div>{{ t('usermanual.scale-view') }}</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-ctrl"/> + <span class="iconfont icon-wheel-change"/></div>
                <div>{{ t('usermanual.scale-view') }}+</div>
            </div>
            <div class="usermanual-item">
                <div><span class="iconfont icon-double-click"/></div>
                <div>{{ t('usermanual.scale-view') }}+</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 setup>
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { horizontalResizer } from '../right-nav';

defineComponent({ name: 'dide-about' });

function goto(url) {
    window.open(url, '_blank');
}

const aboutWrapper = computed(() => ({
    width: horizontalResizer.width - 10 + 'px'
}));

const { t } = useI18n();
</script>

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

.version-caption {
    display: flex;
    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>