<template>
    <div class="images-redirection">
        <div class="configuration-title">Images Redirection</div>
        <div  class="configuration-btn-right">
            <Button type="primary">Advanced Settings</Button>
        </div>
        <div class="images-card">
            <Tabs type="card" :animated="false">
                <TabPane label="Local Media">
                    <div class="configuration-table">
                        <Table :columns="columnsLocal" :data="dataLocal" size="small" ref="table"></Table>
                    </div>
                </TabPane>
                <TabPane label="Remote Media">
                    <div class="configuration-table">
                        <Table :columns="columnsRemote" :data="dataRemote" size="small" ref="table"></Table>
                    </div>
                </TabPane>
                <div class="configuration-btn-right">
                    <Button type="primary" style="margin-right: 10px;">Start Redirection</Button>
                    <Button type="primary" style="margin-right: 10px;">Add Image</Button>
                    <Button type="primary" style="margin-right: 10px;">Replace Image</Button>
                    <Button type="primary">Delete Image</Button>
                </div>
            </Tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImagesRedirection",
        data() {
            return {
                columnsLocal: [
                    {
                        "title": "#",
                        "key": "ID",
                        "sortable": true
                    },
                    {
                        "title": "Image Type",
                        "key": "Name",
                        "sortable": true
                    },
                    {
                        "title": "Image Name",
                        "key": "Domain",
                        "sortable": true
                    },
                    {
                        "title": "Image Information ",
                        "key": "Privilege",
                        "sortable": true
                    }
                ],
                dataRemote: [
                    {
                        ID: 1,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    },
                    {
                        ID: 2,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    }
                ],
                columnsRemote: [
                    {
                        "title": "#",
                        "key": "ID",
                        "sortable": true
                    },
                    {
                        "title": "Image Type",
                        "key": "Name",
                        "sortable": true
                    },
                    {
                        "title": "Image Name",
                        "key": "Domain",
                        "sortable": true
                    },
                    {
                        "title": "Redirection Status",
                        "key": "Privilege",
                        "sortable": true
                    }
                ],
                dataLocal: [
                    {
                        ID: 1,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    },
                    {
                        ID: 2,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>
