import { html } from 'lit-html'

export default {
    title: 'Bootstrap/List Group',
    component: 'bs-list-group',
}

export const example = props => html`
    <bs-list-group horizontal="${props.horizontal}" flush="${props.flush}">
        <bs-list-group-item active="true">Cras justo odio</bs-list-group-item>
        <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
        <bs-list-group-item>Morbi leo risus</bs-list-group-item>
        <bs-list-group-item>Porta ac consectetur ac</bs-list-group-item>
        <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
    </bs-list-group>
`

export const historyPage = props => html`
    <bs-list-group horizontal="sm" flush="true">
        <bs-list-group-item actionable="true" bg-color="#fafafa">
            <div class="container-fluid" style="padding-left: 0; padding-right: 0;">
                <div class="row">
                    <div class="col-3">
                        <div class="mb-3 d-flex align-items-center">
                            <span>10-28-2020 11:24:20</span>
                            <bs-icon style="margin-left: 20px;" icon="fab fa-database" size="18" />
                        </div>
                    </div>
                    <div class="col">
                        <p style="color: rgb(0, 123, 255);">GES DISC Search: Showing 1 - 1 of 1 datasets associated with GLDAS_CLSM025_DA1_D_EP_2.2</p>
                    </div>
                    <div class="col-2">
                        <div class="mb-3 d-flex align-items-center">
                            <bs-button variant="light">
                                <bs-icon icon="fas fa-heart" size="18"></bs-icon>
                            </bs-button>
                            <bs-button variant="light" style="margin-left: 10px;">
                                <bs-icon icon="fab fa-trash-alt" size="18"></bs-icon>
                            </bs-button>
                        </div>
                    </div>
                </div>
            </div>
        </bs-list-group-item>
        <bs-list-group-item actionable="true" bg-color="#f3f3f3">
            <div class="container-fluid" style="padding-left: 0; padding-right: 0;">
                <div class="row">
                    <div class="col-3">
                        <div class="mb-3 d-flex align-items-center">
                            <span>10-28-2020 11:24:20</span>
                            <bs-icon style="margin-left: 20px;" icon="fab fa-database" size="18" />
                        </div>
                    </div>
                    <div class="col">
                        <p style="color: rgb(0, 123, 255);">GES DISC Search: Showing 1 - 1 of 1 datasets associated with GLDAS_CLSM025_DA1_D_EP_2.2</p>
                    </div>
                    <div class="col-2">
                        <div class="mb-3 d-flex align-items-center">
                            <bs-button variant="light">
                                <bs-icon icon="fas fa-heart" size="18"></bs-icon>
                            </bs-button>
                            <bs-button variant="light" style="margin-left: 10px;">
                                <bs-icon icon="fab fa-trash-alt" size="18"></bs-icon>
                            </bs-button>
                        </div>
                    </div>
                </div>
            </div>
        </bs-list-group-item>
        <bs-list-group-item actionable="true"  bg-color="#fafafa">
            <div class="container-fluid" style="padding-left: 0; padding-right: 0;">
                <div class="row">
                    <div class="col-3">
                        <div class="mb-3 d-flex align-items-center">
                            <span>10-28-2020 11:24:20</span>
                            <bs-icon style="margin-left: 20px;" icon="fab fa-database" size="18" />
                        </div>
                    </div>
                    <div class="col">
                        <p style="color: rgb(0, 123, 255);">GES DISC Search: Showing 1 - 1 of 1 datasets associated with GLDAS_CLSM025_DA1_D_EP_2.2</p>
                    </div>
                    <div class="col-2">
                        <div class="mb-3 d-flex align-items-center">
                            <bs-button variant="light">
                                <bs-icon icon="fas fa-heart" size="18"></bs-icon>
                            </bs-button>
                            <bs-button variant="light" style="margin-left: 10px;">
                                <bs-icon icon="fab fa-trash-alt" size="18"></bs-icon>
                            </bs-button>
                        </div>
                    </div>
                </div>
            </div>
        </bs-list-group-item>
        <bs-list-group-item actionable="true" bg-color="#f3f3f3">
            <div class="container-fluid" style="padding-left: 0; padding-right: 0;">
                <div class="row">
                    <div class="col-3">
                        <div class="mb-3 d-flex align-items-center">
                            <span>10-28-2020 11:24:20</span>
                            <bs-icon style="margin-left: 20px;" icon="fab fa-database" size="18" />
                        </div>
                    </div>
                    <div class="col">
                        <p style="color: rgb(0, 123, 255);">GES DISC Search: Showing 1 - 1 of 1 datasets associated with GLDAS_CLSM025_DA1_D_EP_2.2</p>
                    </div>
                    <div class="col-2">
                        <div class="mb-3 d-flex align-items-center">
                            <bs-button variant="light">
                                <bs-icon icon="fas fa-heart" size="18"></bs-icon>
                            </bs-button>
                            <bs-button variant="light" style="margin-left: 10px;">
                                <bs-icon icon="fab fa-trash-alt" size="18"></bs-icon>
                            </bs-button>
                        </div>
                    </div>
                </div>
            </div>
        </bs-list-group-item>
        <bs-list-group-item actionable="true" bg-color="light">
            <div class="container-fluid" style="padding-left: 0; padding-right: 0;">
                <div class="row">
                    <div class="col-3">
                        <div class="mb-3 d-flex align-items-center">
                            <span>10-28-2020 11:24:20</span>
                            <bs-icon style="margin-left: 20px;" icon="fab fa-database" size="18" />
                        </div>
                    </div>
                    <div class="col">
                        <p style="color: rgb(0, 123, 255);">GES DISC Search: Showing 1 - 1 of 1 datasets associated with GLDAS_CLSM025_DA1_D_EP_2.2</p>
                    </div>
                    <div class="col-2">
                        <div class="mb-3 d-flex align-items-center">
                            <bs-button variant="light">
                                <bs-icon icon="fas fa-heart" size="18"></bs-icon>
                            </bs-button>
                            <bs-button variant="light" style="margin-left: 10px;">
                                <bs-icon icon="fab fa-trash-alt" size="18"></bs-icon>
                            </bs-button>
                        </div>
                    </div>
                </div>
            </div>
        </bs-list-group-item>
    </bs-list-group>
`

example.argTypes = {
    horizontal: {
        control: {
            type: 'select',
            options: ['', true, 'sm', 'md', 'lg', 'xl'],
        },
    },
    flush: {
        control: {
            type: 'boolean',
        },
    },
    active: {
        control: {
            type: 'boolean',
        },
    },
}

example.args = {
    horizontal: '',
    flush: false,
    active: true,
}
