<form action="#" method="post">
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#plus-circle" />
</svg>
<span>Add new dish</span>
</span>
</button>
</div>
<div class="card ">
<div class="form-item ">
<label for="21f797c6-7106-42e6-e056-e6cff8402795">
Dish name
</label>
<input type="text" id="21f797c6-7106-42e6-e056-e6cff8402795" value="Pasta Carbonara">
</div>
<fieldset class="">
<legend>Dish properties</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="59cf6d6d-2499-c4b7-b57a-dab69f9b4d42">Weight</label>
<select id="59cf6d6d-2499-c4b7-b57a-dab69f9b4d42" name="59cf6d6d-2499-c4b7-b57a-dab69f9b4d42" class="">
<option value="option-0">Light & tart</option>
<option value="option-1">Powerful & creamy</option>
<option value="option-2">Powerful & intense</option>
<option value="option-3">Light & balanced</option>
<option value="option-4">Hot & spicy</option>
</select>
</div>
<div class="form-item ">
<label for="2aff089d-ec1c-f3a0-fd87-6272e61a1da7">Cooking Style</label>
<select id="2aff089d-ec1c-f3a0-fd87-6272e61a1da7" name="2aff089d-ec1c-f3a0-fd87-6272e61a1da7" class="">
<option value="option-0">Cooked</option>
<option value="option-1">Fried</option>
<option value="option-2">Grilled</option>
<option value="option-3">Oven baked</option>
<option value="option-4">Raw</option>
<option value="option-5">Rimmed</option>
<option value="option-6">Smoked</option>
<option value="option-7">Dried</option>
</select>
</div>
<div class="form-item ">
<label for="76272142-c08d-c240-1a7e-839fd052b8e1">Kitchen</label>
<select id="76272142-c08d-c240-1a7e-839fd052b8e1" name="76272142-c08d-c240-1a7e-839fd052b8e1" class="">
<option value="option-0">French</option>
<option value="option-1">Italian</option>
<option value="option-2">Spanish</option>
<option value="option-3">Mexican</option>
<option value="option-4">Asian</option>
<option value="option-5">Japanese (sushi?)</option>
<option value="option-6">Chinese</option>
<option value="option-7">Scandinavian</option>
<option value="option-8">Vegetarian</option>
<option value="option-9">Vegan</option>
</select>
</div>
<div class="form-item ">
<label for="69805fa6-cd71-4cbf-968d-174736a2b6cd">Main ingredient</label>
<select id="69805fa6-cd71-4cbf-968d-174736a2b6cd" name="69805fa6-cd71-4cbf-968d-174736a2b6cd" class="">
<option value="option-0">Beef</option>
<option value="option-1">Pork</option>
<option value="option-2">Lamb</option>
<option value="option-3">Game/Venison</option>
<option value="option-4">Chicken</option>
<option value="option-5">Duck</option>
<option value="option-6">White fish</option>
<option value="option-7">Fat fish</option>
<option value="option-8">Clams/Shrimps</option>
<option value="option-9">Crab/Lobster</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="">
<legend>Dish basic flavours</legend>
<div class="basic-flavours-container">
<label class="flavour-range">
<span>Acidity</span>
<div class="range">
<input type="range" value="8" min="0" max="100" id="acidity-e9dd66e9-eb22-641f-f63b-99e6e4227d30">
</div>
</label>
<label class="flavour-range">
<span>Sweetness</span>
<div class="range">
<input type="range" value="14" min="0" max="100" id="sweetness-e867a3ae-114b-bffb-1674-1f218d50b6e5">
</div>
</label>
<label class="flavour-range">
<span>Saltiness</span>
<div class="range">
<input type="range" value="35" min="0" max="100" id="saltiness-63f0e576-76d8-388d-1ed3-402fbdc7d767">
</div>
</label>
<label class="flavour-range">
<span>Bitterness</span>
<div class="range">
<input type="range" value="0" min="0" max="100" id="bitterness-0884ce94-35ae-a009-3af9-88678d92d18a">
</div>
</label>
<label class="flavour-range">
<span>Umami</span>
<div class="range">
<input type="range" value="50" min="0" max="100" id="umami-e56f691a-d393-51f6-5bd5-1fff59348177">
</div>
</label>
</div>
</fieldset>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Remove</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save dish</span>
</span>
</button>
</div>
</div>
<div class="card ">
<div class="form-item ">
<label for="ac5209e8-e1c0-e8a9-cc48-34b5d8c98ec7">
Dish name
</label>
<input type="text" id="ac5209e8-e1c0-e8a9-cc48-34b5d8c98ec7" value="Steak Tartare">
</div>
<fieldset class="">
<legend>Dish properties</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="c5c90a87-aaf8-90d8-6fad-2779619a92da">Weight</label>
<select id="c5c90a87-aaf8-90d8-6fad-2779619a92da" name="c5c90a87-aaf8-90d8-6fad-2779619a92da" class="">
<option value="option-0">Light & tart</option>
<option value="option-1">Powerful & creamy</option>
<option value="option-2">Powerful & intense</option>
<option value="option-3">Light & balanced</option>
<option value="option-4">Hot & spicy</option>
</select>
</div>
<div class="form-item ">
<label for="70aff39e-8699-fa9c-577d-1ab7d49716bb">Cooking Style</label>
<select id="70aff39e-8699-fa9c-577d-1ab7d49716bb" name="70aff39e-8699-fa9c-577d-1ab7d49716bb" class="">
<option value="option-0">Cooked</option>
<option value="option-1">Fried</option>
<option value="option-2">Grilled</option>
<option value="option-3">Oven baked</option>
<option value="option-4">Raw</option>
<option value="option-5">Rimmed</option>
<option value="option-6">Smoked</option>
<option value="option-7">Dried</option>
</select>
</div>
<div class="form-item ">
<label for="6af41704-986e-9716-742b-63dac08c58e8">Kitchen</label>
<select id="6af41704-986e-9716-742b-63dac08c58e8" name="6af41704-986e-9716-742b-63dac08c58e8" class="">
<option value="option-0">French</option>
<option value="option-1">Italian</option>
<option value="option-2">Spanish</option>
<option value="option-3">Mexican</option>
<option value="option-4">Asian</option>
<option value="option-5">Japanese (sushi?)</option>
<option value="option-6">Chinese</option>
<option value="option-7">Scandinavian</option>
<option value="option-8">Vegetarian</option>
<option value="option-9">Vegan</option>
</select>
</div>
<div class="form-item ">
<label for="1f784116-2814-7793-a2c1-5287ae5715e9">Main ingredient</label>
<select id="1f784116-2814-7793-a2c1-5287ae5715e9" name="1f784116-2814-7793-a2c1-5287ae5715e9" class="">
<option value="option-0">Beef</option>
<option value="option-1">Pork</option>
<option value="option-2">Lamb</option>
<option value="option-3">Game/Venison</option>
<option value="option-4">Chicken</option>
<option value="option-5">Duck</option>
<option value="option-6">White fish</option>
<option value="option-7">Fat fish</option>
<option value="option-8">Clams/Shrimps</option>
<option value="option-9">Crab/Lobster</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="">
<legend>Dish basic flavours</legend>
<div class="basic-flavours-container">
<label class="flavour-range">
<span>Acidity</span>
<div class="range">
<input type="range" value="8" min="0" max="100" id="acidity-f3d8a122-89c5-f194-5802-100414d7fbf3">
</div>
</label>
<label class="flavour-range">
<span>Sweetness</span>
<div class="range">
<input type="range" value="14" min="0" max="100" id="sweetness-286fb055-c68f-fb97-74ae-3c5cfa424def">
</div>
</label>
<label class="flavour-range">
<span>Saltiness</span>
<div class="range">
<input type="range" value="35" min="0" max="100" id="saltiness-5b5a6d2b-f1e8-300e-e7e4-f0ac58cfd26c">
</div>
</label>
<label class="flavour-range">
<span>Bitterness</span>
<div class="range">
<input type="range" value="0" min="0" max="100" id="bitterness-2c6512bc-3b24-0a54-eea7-69b00b4c2ea5">
</div>
</label>
<label class="flavour-range">
<span>Umami</span>
<div class="range">
<input type="range" value="50" min="0" max="100" id="umami-5965ad70-0b07-f59e-482d-4e655c1d382f">
</div>
</label>
</div>
</fieldset>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Remove</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save dish</span>
</span>
</button>
</div>
</div>
<div class="card ">
<div class="form-item ">
<label for="616874c5-be26-8e5f-dcef-d4df4a3a3ed9">
Dish name
</label>
<input type="text" id="616874c5-be26-8e5f-dcef-d4df4a3a3ed9" value="Laxpudding">
</div>
<fieldset class="">
<legend>Dish properties</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="36444e90-0370-7eb7-a837-4916bdda9c3b">Weight</label>
<select id="36444e90-0370-7eb7-a837-4916bdda9c3b" name="36444e90-0370-7eb7-a837-4916bdda9c3b" class="">
<option value="option-0">Light & tart</option>
<option value="option-1">Powerful & creamy</option>
<option value="option-2">Powerful & intense</option>
<option value="option-3">Light & balanced</option>
<option value="option-4">Hot & spicy</option>
</select>
</div>
<div class="form-item ">
<label for="951f97ae-4256-361a-bdfa-5f17c0c92590">Cooking Style</label>
<select id="951f97ae-4256-361a-bdfa-5f17c0c92590" name="951f97ae-4256-361a-bdfa-5f17c0c92590" class="">
<option value="option-0">Cooked</option>
<option value="option-1">Fried</option>
<option value="option-2">Grilled</option>
<option value="option-3">Oven baked</option>
<option value="option-4">Raw</option>
<option value="option-5">Rimmed</option>
<option value="option-6">Smoked</option>
<option value="option-7">Dried</option>
</select>
</div>
<div class="form-item ">
<label for="d06f2d3d-4661-b525-1921-2941019684ab">Kitchen</label>
<select id="d06f2d3d-4661-b525-1921-2941019684ab" name="d06f2d3d-4661-b525-1921-2941019684ab" class="">
<option value="option-0">French</option>
<option value="option-1">Italian</option>
<option value="option-2">Spanish</option>
<option value="option-3">Mexican</option>
<option value="option-4">Asian</option>
<option value="option-5">Japanese (sushi?)</option>
<option value="option-6">Chinese</option>
<option value="option-7">Scandinavian</option>
<option value="option-8">Vegetarian</option>
<option value="option-9">Vegan</option>
</select>
</div>
<div class="form-item ">
<label for="c03cfbfc-1c74-100a-6806-75af60381157">Main ingredient</label>
<select id="c03cfbfc-1c74-100a-6806-75af60381157" name="c03cfbfc-1c74-100a-6806-75af60381157" class="">
<option value="option-0">Beef</option>
<option value="option-1">Pork</option>
<option value="option-2">Lamb</option>
<option value="option-3">Game/Venison</option>
<option value="option-4">Chicken</option>
<option value="option-5">Duck</option>
<option value="option-6">White fish</option>
<option value="option-7">Fat fish</option>
<option value="option-8">Clams/Shrimps</option>
<option value="option-9">Crab/Lobster</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="">
<legend>Dish basic flavours</legend>
<div class="basic-flavours-container">
<label class="flavour-range">
<span>Acidity</span>
<div class="range">
<input type="range" value="8" min="0" max="100" id="acidity-3717dcc3-7335-cf1c-a7f8-aa0ab18250eb">
</div>
</label>
<label class="flavour-range">
<span>Sweetness</span>
<div class="range">
<input type="range" value="14" min="0" max="100" id="sweetness-d5fcb1a9-f876-2500-dfef-4b315e8a40be">
</div>
</label>
<label class="flavour-range">
<span>Saltiness</span>
<div class="range">
<input type="range" value="35" min="0" max="100" id="saltiness-9d2a7b03-5542-b9ad-2d8c-7be27d0839cf">
</div>
</label>
<label class="flavour-range">
<span>Bitterness</span>
<div class="range">
<input type="range" value="0" min="0" max="100" id="bitterness-39b7db4f-e7cf-c634-7488-70cad7c79a9d">
</div>
</label>
<label class="flavour-range">
<span>Umami</span>
<div class="range">
<input type="range" value="50" min="0" max="100" id="umami-1cffbef7-589b-2346-5e8f-2d752e8e1201">
</div>
</label>
</div>
</fieldset>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Remove</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save dish</span>
</span>
</button>
</div>
</div>
<div class="card ">
<div class="form-item ">
<label for="6648fecd-7ab5-cb56-0bca-3ea455741663">
Dish name
</label>
<input type="text" id="6648fecd-7ab5-cb56-0bca-3ea455741663" value="">
</div>
<fieldset class="">
<legend>Dish properties</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="d0cfcc28-d072-2e47-4312-1bea358e6f66">Weight</label>
<select id="d0cfcc28-d072-2e47-4312-1bea358e6f66" name="d0cfcc28-d072-2e47-4312-1bea358e6f66" class="">
<option value="option-0">Light & tart</option>
<option value="option-1">Powerful & creamy</option>
<option value="option-2">Powerful & intense</option>
<option value="option-3">Light & balanced</option>
<option value="option-4">Hot & spicy</option>
</select>
</div>
<div class="form-item ">
<label for="7db3718f-0ee4-9ded-8337-00355587a63e">Cooking Style</label>
<select id="7db3718f-0ee4-9ded-8337-00355587a63e" name="7db3718f-0ee4-9ded-8337-00355587a63e" class="">
<option value="option-0">Cooked</option>
<option value="option-1">Fried</option>
<option value="option-2">Grilled</option>
<option value="option-3">Oven baked</option>
<option value="option-4">Raw</option>
<option value="option-5">Rimmed</option>
<option value="option-6">Smoked</option>
<option value="option-7">Dried</option>
</select>
</div>
<div class="form-item ">
<label for="91f45100-3902-940b-e7f6-66882284bf6e">Kitchen</label>
<select id="91f45100-3902-940b-e7f6-66882284bf6e" name="91f45100-3902-940b-e7f6-66882284bf6e" class="">
<option value="option-0">French</option>
<option value="option-1">Italian</option>
<option value="option-2">Spanish</option>
<option value="option-3">Mexican</option>
<option value="option-4">Asian</option>
<option value="option-5">Japanese (sushi?)</option>
<option value="option-6">Chinese</option>
<option value="option-7">Scandinavian</option>
<option value="option-8">Vegetarian</option>
<option value="option-9">Vegan</option>
</select>
</div>
<div class="form-item ">
<label for="098bed81-d3dd-c98f-d550-a24ba850fd47">Main ingredient</label>
<select id="098bed81-d3dd-c98f-d550-a24ba850fd47" name="098bed81-d3dd-c98f-d550-a24ba850fd47" class="">
<option value="option-0">Beef</option>
<option value="option-1">Pork</option>
<option value="option-2">Lamb</option>
<option value="option-3">Game/Venison</option>
<option value="option-4">Chicken</option>
<option value="option-5">Duck</option>
<option value="option-6">White fish</option>
<option value="option-7">Fat fish</option>
<option value="option-8">Clams/Shrimps</option>
<option value="option-9">Crab/Lobster</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="">
<legend>Dish basic flavours</legend>
<div class="basic-flavours-container">
<label class="flavour-range">
<span>Acidity</span>
<div class="range">
<input type="range" value="8" min="0" max="100" id="acidity-66a77b7a-5972-af51-6362-ef59f37be5a6">
</div>
</label>
<label class="flavour-range">
<span>Sweetness</span>
<div class="range">
<input type="range" value="14" min="0" max="100" id="sweetness-2b8b530d-4d66-ecdd-d607-4416a63eba84">
</div>
</label>
<label class="flavour-range">
<span>Saltiness</span>
<div class="range">
<input type="range" value="35" min="0" max="100" id="saltiness-2d83c6bc-60a0-6974-d0f1-32a27458022d">
</div>
</label>
<label class="flavour-range">
<span>Bitterness</span>
<div class="range">
<input type="range" value="0" min="0" max="100" id="bitterness-b456e7ca-9180-cf62-09b8-afd021085fa2">
</div>
</label>
<label class="flavour-range">
<span>Umami</span>
<div class="range">
<input type="range" value="50" min="0" max="100" id="umami-3b36608a-75ce-ce3d-d083-8c45301fd0e9">
</div>
</label>
</div>
</fieldset>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Remove</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save dish</span>
</span>
</button>
</div>
</div>
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#plus-circle" />
</svg>
<span>Add new dish</span>
</span>
</button>
</div>
</form>
<form action="#" method="post">
{{#> @action-bar}}
{{> @button text="Add new dish" icon="plus-circle" }}
{{/ @action-bar}}
{{#each dishes}}
{{#> @card}}
{{> @form-item-input label="Dish name" value=dish-name id=(random) }}
{{#> @fieldset--grid legend="Dish properties"}}
{{> @form-item-select ../../weight id=(random) }}
{{> @form-item-select ../../cooking-style id=(random) }}
{{> @form-item-select ../../kitchen id=(random) }}
{{> @form-item-select ../../main-ingredient id=(random) }}
{{/ @fieldset--grid}}
{{#> @fieldset legend="Dish basic flavours"}}
{{> @basic-flavours ../basic-flavours}}
{{/ @fieldset}}
{{#> @action-bar}}
{{> @button icon="delete" text="Remove" modifier="alt" }}
{{> @button icon="save" text="Save dish" }}
{{/ @action-bar}}
{{/ @card}}
{{/each}}
{{#> @action-bar}}
{{> @button text="Add new dish" icon="plus-circle" }}
{{/ @action-bar}}
</form>
{
"weight": {
"label": "Weight",
"options": [
{
"option": "Light & tart"
},
{
"option": "Powerful & creamy"
},
{
"option": "Powerful & intense"
},
{
"option": "Light & balanced"
},
{
"option": "Hot & spicy"
}
]
},
"cooking-style": {
"label": "Cooking Style",
"options": [
{
"option": "Cooked"
},
{
"option": "Fried"
},
{
"option": "Grilled"
},
{
"option": "Oven baked"
},
{
"option": "Raw"
},
{
"option": "Rimmed"
},
{
"option": "Smoked"
},
{
"option": "Dried"
}
]
},
"kitchen": {
"label": "Kitchen",
"options": [
{
"option": "French"
},
{
"option": "Italian"
},
{
"option": "Spanish"
},
{
"option": "Mexican"
},
{
"option": "Asian"
},
{
"option": "Japanese (sushi?)"
},
{
"option": "Chinese"
},
{
"option": "Scandinavian"
},
{
"option": "Vegetarian"
},
{
"option": "Vegan"
}
]
},
"main-ingredient": {
"label": "Main ingredient",
"options": [
{
"option": "Beef"
},
{
"option": "Pork"
},
{
"option": "Lamb"
},
{
"option": "Game/Venison"
},
{
"option": "Chicken"
},
{
"option": "Duck"
},
{
"option": "White fish"
},
{
"option": "Fat fish"
},
{
"option": "Clams/Shrimps"
},
{
"option": "Crab/Lobster"
}
]
},
"basic-flavours": {
"acidity": {
"legend": "Acidity",
"modifier": "slim inline",
"group": "acidity",
"radios": [
{
"label": "0"
},
{
"label": 1
},
{
"label": 2,
"checked": true
},
{
"label": 3
},
{
"label": 4
},
{
"label": 5
}
]
},
"sweetness": {
"legend": "Sweetness",
"modifier": "slim inline",
"group": "sweetness",
"radios": [
{
"label": "0"
},
{
"label": 1,
"checked": true
},
{
"label": 2
},
{
"label": 3
},
{
"label": 4
},
{
"label": 5
}
]
},
"saltiness": {
"legend": "Saltiness",
"modifier": "slim inline",
"group": "saltiness",
"radios": [
{
"label": "0"
},
{
"label": 1
},
{
"label": 2
},
{
"label": 3
},
{
"label": 4,
"checked": true
},
{
"label": 5
}
]
},
"bitterness": {
"legend": "Bitterness",
"modifier": "slim inline",
"group": "bitterness",
"radios": [
{
"label": "0"
},
{
"label": 1
},
{
"label": 2
},
{
"label": 3,
"checked": true
},
{
"label": 4
},
{
"label": 5
}
]
},
"umami": {
"legend": "Umami",
"modifier": "slim inline",
"group": "umami",
"radios": [
{
"label": "0",
"checked": true
},
{
"label": 1
},
{
"label": 2
},
{
"label": 3
},
{
"label": 4
},
{
"label": 5
}
]
}
},
"dishes": [
{
"dish-name": "Pasta Carbonara"
},
{
"dish-name": "Steak Tartare"
},
{
"dish-name": "Laxpudding"
},
{
"dish-name": null
}
]
}
No notes defined.