<template>
    <div class="givemoney">
        <div class="head">
            <div style="display: grid; grid-template-columns: repeat(2, 1fr);">
                <h3>Geld geben</h3>
                <i v-on:click="terminate" class="fas fa-times"></i>
            </div>
        </div>
        <div class="content">
            <input class="secondary" placeholder="Geldbetrag" type="number" v-model="money" autofocus /><br>
            <button class="btn primary" :disabled="(money == null || money == 0)" v-on:click="handle">Bestätigen</button>
        </div>
    </div>
</template>

<script>
    import Windows from "../windows"

    export default Windows.register({
        name: "GiveMoney",
        props: {
            data: String
        },
        data() {
            return {
                moneyData: JSON.parse(this.data),
                money: null
            }
        },
        methods: {
            dismiss() {
                this.dismiss()
            },
            handle() {
                if (this.money == null) return
                this.triggerServer("GivePlayerMoney", this.moneyData.name, this.money)
                this.dismiss()
            },
            terminate() {
                this.dismiss()
            }
        }
    })
</script>

<style lang="scss" scoped>
    .givemoney {
        margin-top: 37.3vh;
        border-radius: 1vh;
        box-shadow: 5px 1px 10px -1px rgba(0, 0, 0, 0.4);
        margin-left: auto;
        margin-right: auto;
        width: 41vh;
        height: 25.7vh;
        background-color: #eee;
        .head

    {
        border-top-right-radius: 1vh;
        border-top-left-radius: 1vh;
        border-top: 2vh solid #FF9800;
        border-bottom: 0.5vh solid #FF9800;
        h3

    {
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
        font-size: 3vh;
        color: #37474F;
        font-weight: 400;
        margin-left: 3vh;
        text-align: left;
    }

    i {
        font-size: 3.5vh;
        color: #37474F;
        text-align: right;
        margin-right: 2.5vh;
        margin-top: 1.5vh;
    }

        i:hover {
            color: #263238;
            transition: color 0.5s;
        }

    }

    .content {
        input

    {
        margin-top: 2.5vh;
        margin-left: 3vh;
        margin-right: 3vh;
        width: 35vh;
        height: 5vh;
        font-size: 2vh;
        color: #37474F;
    }

    input:active, input:focus {
        border-color: #FF9800;
    }

    button {
        font-size: 1.5vh;
        margin-left: 3vh;
        height: 4vh;
        &.btn

    {
        border-radius: 0.5vh;
        padding: 2vh;
        line-height: 0;
        margin-top: 2vh;
    }

    }
    }
    }
</style>
<!-- components.Windows.show("GiveMoney") -->