<template>
    <va-row>
       <div class="col-md-12">
          <va-card theme="primary" :isOutline="true" title="Gradient & Block Buttons" icon="fa fa-edit" >
            <div slot="content" class="table-responsive">
                <p>Various types of buttons base on vue component. Using the base class <code>.btn</code> with <code>btn-block</code> & <code>bg-gradient</code></p>
                <table class="table table-bordered text-center">
                    <tbody>
                    <tr>
                        <th>Normal</th>
                        <th>Large <code>.btn-lg</code></th>
                        <th>Small <code>.btn-sm</code></th>
                        <th>X-Small <code>.btn-xs</code></th>
                        <th>Flat <code>.btn-flat</code></th>
                        <th>Disabled <code>.disabled</code></th>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Primary click"
                                    theme="primary"
                                    :isGradient="true"
                                    :isBlock="true"
                                    @btn-click="$Swal.fire('Basic Alert!')"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    :isFlat="true"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="btn-lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="lg"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="sm"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="xs"
                                    :isGradient="true"
                                    :isBlock="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    :isGradient="true"
                                    :isBlock="true"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </va-card>
       </div>
    </va-row>
</template>

<script>    

    export default {
        name: "ButtonsVue",
    }
</script>
