<template>

	<v-container fluid>
		<v-flex xs12  >

			<v-data-table
					:headers="headers"
					:items="items"
					hide-actions
					class="elevation-1"
			>
				<template slot="items" slot-scope="props">
					<td>{{ props.item.name }}</td>
					<td class="text-xs-right">{{ props.item.calories }}</td>
					<td class="text-xs-right">{{ props.item.fat }}</td>
					<td class="text-xs-right">{{ props.item.carbs }}</td>
					<td class="text-xs-right">{{ props.item.protein }}</td>
					<td class="text-xs-right">{{ props.item.iron }}</td>
					<td>{{ props.item.description }}</td>
				</template>
			</v-data-table>

		</v-flex>
	</v-container>

</template>

<script>
    export default {
        data() {
            return {
                headers: [
                    {
                        text: 'Dessert (100g serving)',
                        align: 'left',
                        sortable: false,
                        value: 'name'
                    },
                    {text: 'Calories', value: 'calories'},
                    {text: 'Fat (g)', value: 'fat'},
                    {text: 'Carbs (g)', value: 'carbs'},
                    {text: 'Protein (g)', value: 'protein'},
                    {text: 'Iron (%)', value: 'iron'},
                    {text: 'Description', value: 'description'}
                ],
                items: [
                    {
                        value: false,
                        name: 'Frozen Yogurt',
                        calories: 159,
                        fat: 6.0,
                        carbs: 24,
                        protein: '4.0_Lorem_ipsum_dolor_sit_amet',
                        iron: '1%',
                        description: 'Loremipsumdolorsitametconsecteturadipiscingelit... '
                    },
                    {
                        value: false,
                        name: 'Ice cream sandwich',
                        calories: 237,
                        fat: 9.0,
                        carbs: 37,
                        protein: '4.3 Lorem  ipsum dolor sit amet',
                        iron: '1%',
                        description: 'Loremipsumdolorsitametconsecteturadipiscingelit... '
                    },
                    {
                        value: false,
                        name: 'Eclair',
                        calories: 262,
                        fat: 16.0,
                        carbs: 23,
                        protein: '6.0_Lorem_ipsum_dolor_sit_amet',
                        iron: '7%',
                        description: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit... '
                    },
                    {
                        value: false,
                        name: 'Cupcake',
                        calories: 305,
                        fat: 3.7,
                        carbs: 67,
                        protein: '4.3_Lorem_ipsum_dolor_sit_amet',
                        iron: '8%',
                        description: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit... '
                    },
                ]
            }
        }
    }
</script>

                        <div class="table-responsive">
                            <table class="table">

<template>

	<v-container fluid fill-height>

		<listing-header :show_progress_circular=!is_page_loaded :rows_count=genresList.length :current_page=1 :itemsList="genresList"
		                :header_icon="getHeaderIcon('genre')" :header_title="header_title"
		                :message=message :item_title="'row'" :right_add_button_link="true" :parent_component_key="'genres_listing'"></listing-header>

		<v-card light flat v-show="is_page_loaded">

			<v-card-title>
				Search by all fields
				<v-spacer></v-spacer>
				<v-text-field
						append-icon="search"
						label="Search"
						single-line
						hide-details
						v-model="search_string"
				></v-text-field>
			</v-card-title>

			<v-layout>
				<div class="data_table_wrapper">


					<v-data-table
							:headers="headersList"
							:items="genresList"
							:search="search_string"
							:pagination.sync="pagination"
							:rows-per-page-items="rowsPerPageItemsArray"
							class="elevation-1"
					>

						<template slot="items" slot-scope="props">
							<td>{{ props.item.id }}</td>
							<td>
								{{ props.item.name }}
								<small v-show="props.item.related_songs_count > 0">( {{ props.item.related_songs_count }} related song{{
                                    pluralize(props.item.related_songs_count, '', 's') }} )
								</small>
							</td>
							...
							<td>{{ concatStr(props.item.description, 80) }}</td>
							<td class="justify-center">{{ momentDatetime(props.item.created_at, settings_js_moment_datetime_format) }}</td>
							<td class="justify-center layout px-0">
								<v-btn icon class="mx-0" @click="editGenre(props.item.id)">
									<v-icon color="teal">edit</v-icon>
								</v-btn>
								<v-btn icon class="mx-0" @click="removeGenre(props.item.id, props.item.name)">
									<v-icon color="pink">delete</v-icon>
								</v-btn>
							</td>
						</template>
						...
					</v-data-table>

				</div>
			</v-layout>


		</v-card>
	</v-container>

</template>

<template>
	<v-toolbar-title>

		<v-progress-circular indeterminate :size="40" color="amber" v-show="show_progress_circular" class="pt-1"></v-progress-circular>
		<v-icon color="teal" large>{{ header_icon }}</v-icon>
		{{ header_title }}

		<small v-show="rows_count > 0">{{ rows_count }} {{ item_title }}{{ pluralize(rows_count,'','s') }}</small>

		<div class="pull_right a_link" v-show="right_icon!= ''">
			<v-icon  color="teal" title="Refresh" @click="triggerListingHeaderRightButtonClickedEvent">{{ right_icon_class }}</v-icon>
		</div>

		<div class="pull-right" v-show="right_add_button_link">
			<v-icon color="teal" :title="right_add_button_link_title" @click="triggerListingHeaderAddRightButtonClickedEvent">fiber_new</v-icon>&nbsp;

			<span class="pull-right" v-show="right_add_button_link_2">
			&nbsp;&nbsp;<router-link :to="{ name: right_add_button_link_2, params: { id: 'new' } }" class="mb-1">{{ right_add_button_link_2_title }}
				</router-link>
			</span>
		</div>

		<v-alert type="error" :value="true" v-show="message != '' && !show_progress_circular " color="red">
			{{ message }}
		</v-alert>

	</v-toolbar-title>
</template>

.data_table_wrapper {
max-width: 100%;
background-color: navy;
}

<v-container fluid fill-height>

	<v-card

		<v-layout