<section class="page-section" id="contact">
    <div class="container">
        <!-- Contact Section Heading-->
        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Product List</h2>
        <!-- Icon Divider-->
        <div class="divider-custom">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon"><svg class="svg-inline--fa fa-star" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"></path></svg><!-- <i class="fas fa-star"></i> Font Awesome fontawesome.com --></div>
            <div class="divider-custom-line"></div>
        </div>
        <!-- Contact Section Form-->
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-7">
                <!-- * * * * * * * * * * * * * * *-->
                <!-- * * SB Forms Contact Form * *-->
                <!-- * * * * * * * * * * * * * * *-->
                <!-- This form is pre-integrated with SB Forms.-->
                <!-- To make this form functional, sign up at-->
                <!-- https://startbootstrap.com/solution/contact-forms-->
                <!-- to get an API token!-->
                <form id="contactForm" data-sb-form-api-token="API_TOKEN">
                    <!-- Name input-->
                    <div class="form-floating mb-3">
                        <input class="form-control" id="name" type="text" name="name" [(ngModel)]="product.name" placeholder="Product name" data-sb-validations="required" data-sb-can-submit="no">
                        <label for="name">Product name</label>
                        <div class="invalid-feedback" data-sb-feedback="name:required">A product name is required.</div>
                    </div>
                    <!-- Description input-->
                    <div class="form-floating mb-3">
                        <textarea class="form-control" id="description" type="text" name="description" [(ngModel)]="product.description" placeholder="Product description" data-sb-validations="required" data-sb-can-submit="no"></textarea>
                        <label for="description">Product description</label>
                        <div class="invalid-feedback" data-sb-feedback="description:required">A product description is required.</div>
                    </div>
                    <!-- Value input-->
                    <div class="form-floating mb-3">
                        <textarea class="form-control" id="value" type="number" name="value" [(ngModel)]="product.value" placeholder="Product value" data-sb-validations="required" data-sb-can-submit="no"></textarea>
                        <label for="value">Product value</label>
                        <div class="invalid-feedback" data-sb-feedback="value:required">A product value is required.</div>
                    </div>
                    <!-- Submit Button-->
                    <button class="btn btn-primary btn-xl" id="submitButton" type="button" (click)="addProduct()">Save</button>
                </form>
            </div>
        </div>
    </div>
</section>

<section>
    <div *ngIf="products.length == 0" class="alert alert-primary" role="alert">
        This is a primary alert—check it out!
    </div>
    <table *ngIf="products.length > 0" class="table">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Value</th>
            <th scope="col">Edit product</th>
            <th scope="col">Delete product</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let product of products">
            <th scope="row">{{product.id}}</th>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.value.toString() | currency: "BRL" }}</td>
            <td><button class="btn btn-primary btn-sm" id="submitButton" type="button" (click)="editProduct(product.id)">Edit Product</button></td>
            <td><button class="btn btn-primary btn-sm" id="submitButton" type="button" (click)="deleteProduct(product.id)">Delete Product</button></td>
          </tr>
        </tbody>
    </table>
</section>