Display business items

assets/templates/admin/businesses.html

@@ -9,7 +9,17 @@
                     name="{{business.name}}"
                     state="{{ business.state }}"
             >
-                {{business.description|safe}}
+                <p slot="description">{{business.description|safe}}</p>
+
+                {% for item in business.items %}
+                <local-business-item
+                        slot="item"
+                        name="{{item.name}}"
+                        price="{{item.price}}"
+                        picture-url="{{item.picture_url}}"
+                >
+                </local-business-item>
+                {% endfor %}
             </admin-business>
         </admin-edit-business>
         {% endfor %}

client/src/admin/admin-business.js

@@ -11,12 +11,18 @@ customElements.define('admin-business', class extends Component {
                 :host {
                     display: block;
                 }
+                ::slotted(local-business-item) {
+                    width: 100%;
+                }
             </style>
             <article>
                 <h1 id="name"></h1>
             </article>
             <article>
-                <slot></slot>
+                <slot name="description"></slot>
+            </article>
+            <article>
+                <slot name="item"></slot>
             </article>
         `);
     }

client/src/admin/admin-edit-business.js

@@ -19,6 +19,9 @@ customElements.define('admin-edit-business', class extends Component {
                 #actions > input:not(:last-child) {
                     margin-right: .5rem;
                 }
+                ::slotted(admin-business) {
+                    width: 100%;
+                }
                 ${ BUTTON_STYLE }
                 ${ INPUT_STYLE }
             </style>