<template>
    <v-container>
        <v-row>
            <v-col>Rank</v-col>
            <v-col>East</v-col>
            <v-col>West</v-col>
        </v-row>
        <v-row v-for="rank in ranks" :key="rank.name">
            <v-col>{{ rank.name }}</v-col>
            <v-col>
                <v-chip draggable>{{rank.east}}</v-chip>
            </v-col>
            <v-col>
                <v-chip draggable>{{rank.west}}</v-chip>
            </v-col>
        </v-row>
    </v-container>
</template>

<script setup>
const ranks = [
    {
        name: 'Yokozuna',
        east: 'Terunofuji',
        west: ''
    },
    {
        name: 'Ozeki',
        east: 'Takekeisho',
        west: 'Kirishima'
    },
    {
        name: 'Ozeki',
        east: '',
        west: 'Hoshoryu'
    },
    {
        name: 'Sekiwake',
        east: 'Daieisho',
        west: 'Wakamotoharu',
    },
    {
        name: 'Sekiwake',
        east: 'Kotonowaka',
        west: ''
    },
    {
        name: 'Komosubi',
        east: 'Abi',
        west: 'Hokutofuji'
    },
    {
        name: 'Maegashira 1',
        east: 'Asanoyama',
        west: 'Ura'
    },
    {
        name: 'Maegashira 2',
        east: 'Shodai',
        west: 'Meisei'
    },
    {
        name: 'Maegashira 3',
        east: 'Takayasu',
        west: 'Tobizaru'
    },
    {
        name: 'Maegashira 4',
        east: 'Gonoyama',
        west: 'Nishikigi'
    },
    {
        name: 'Maegashira 5',
        east: 'Onosho',
        west: 'Midorifuji'
    },
    {
        name: 'Maegashira 6',
        east: 'Shonannoumi',
        west: 'Takanosho'
    },
    {
        name: 'Maegashira 7',
        east: 'Hokuseiho',
        west: 'Kinbozan'
    },
    {
        name: 'Maegashira 8',
        east: 'Endo',
        west: 'Atamifuji'
    },
    {
        name: 'Maegashira 9',
        east: 'Myogiryu',
        west: 'Mitakeumi'
    },
    {
        name: 'Maegashira 10',
        east: 'Ryuden',
        west: 'Kotoeko'
    },
    {
        name: 'Maegashira 11',
        east: 'Sadanoumi',
        west: 'Hiradoumi'
    },
    {
        name: 'Maegashira 12',
        east: 'Oho',
        west: 'Tamawashi'
    },
    {
        name: 'Maegashira 13',
        east: 'Takarafuji',
        west: 'Tsurugisho'
    },
    {
        name: 'Maegashira 14',
        east: 'Tomokaze',
        west: 'Ichiyamamoto'
    },
    {
        name: 'Maegashira 15',
        east: 'Tohakuyru',
        west: 'Churanoumi'
    },
    {
        name: 'Maegashira 16',
        east: 'Roga',
        west: 'Nishikifuji'
    },
    {
        name: 'Maegashira 17',
        east: 'Kitanowaka',
        west: ''
    }
    ];
</script>