import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Breadcrumbs',
    component: 'x-breadcrumbs',
    subcomponents: ['x-breadcrumb'],
};
const Template = new Builder(args => `<x-breadcrumbs ${toProps(args)}>
	<x-breadcrumb separator="bull" icon="left" href="#"></x-breadcrumb>
	<x-breadcrumb>Configuración</x-breadcrumb>
</x-breadcrumbs>`);
export const Simple = Template.args({}).build();
export const Fluid = Template.args({
    fluid: true,
}).build();
export const WithIcons = Template.args({}).build(args => `<x-breadcrumbs ${toProps(args)}>
	<x-breadcrumb icon="menu" href="#">Inicio</x-breadcrumb>
	<x-breadcrumb icon="basket" href="#">Catálogo</x-breadcrumb>
	<x-breadcrumb icon="package">Producto</x-breadcrumb>
</x-breadcrumbs>`);
export const WithCard = Template.args({
    fluid: true,
}).build(args => `<x-card icon="user" icon-color="primary">
	<legend>
		<strong>Lorem</strong>
	</legend>

	<x-breadcrumbs ${toProps(args)}>
		<x-breadcrumb icon="menu" href="#">Inicio</x-breadcrumb>
		<x-breadcrumb icon="basket" href="#">Catálogo</x-breadcrumb>
		<x-breadcrumb icon="package">Producto</x-breadcrumb>
	</x-breadcrumbs>
	
	<div class="form-group">
		<p style="opacity:0.8">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro illum vitae tenetur blanditiis voluptatem qui quibusdam rem provident animi veniam facere fugit, est quam excepturi ducimus nam, ad fugiat nostrum!</p>
	</div>

	<div class="form-group">
		<autocomplete-field label="Test" placeholder="Select option" :autocomplete-values="['Hello','World']"></autocomplete-field>
	</div>

	<div class="form-group">
		<dropdown-field value="Testing 1" :options="['Testing 1','Testing 2','Testing 3','Testing 4','Testing 5']"></dropdown-field>
	</div>

	<div slot="footer">
		<span class="text-muted"><i class="icon-clock"></i> 6 minutes ago</span>
		<a href="javascript:;" class="card-link"><i class="icon-right"></i> Go to action</a>
	</div>
</x-card>`);
