<template>
    <div>
        <h1>Knihkupectví</h1>
        <div class="row">
            <div class="col">
                <h2>Knihy</h2>
                <div v-for="(kniha, i) in knihy" :key="i">
                    {{ kniha.nazev }}
                    <button
                        v-on:click="typKniha(kniha, typ)"
                        class="btn"
                        v-bind:class="{
                            'btn-success': kniha.typ_volba == typ.nazev,
                            'btn-outline-secondary':
                                kniha.typ_volba != typ.nazev,
                        }"
                        v-for="(typ, i) in kniha.typy"
                        :key="i"
                    >
                        <i class="fas" v-bind:class="typ.ikona"></i>
                        {{ typ.nazev }}
                    </button>
                    <p>
                        {{ kniha.format_volba }}
                    </p>
                </div>
            </div>
            <div class="col">
                <h2>Košík</h2>
            </div>
        </div>
    </div>
</template>

<script>
import data from "./assets/knihy.json";

export default {
    name: "App",
    data: function () {
        return {
            knihy: data,
        };
    },
    methods: {
        typKniha: function(kniha, typ) {
            kniha.typ_volba = typ.nazev
            kniha.format_volba = typ.formaty
        },
    },
};
</script>

<style>
</style>
