

<div class="row align-items-start">
    <canvas id="signatureCanvas" class="col-9" width="320" height="320"></canvas>
    <div class="col-3" style="width: 90px">
        <div class="card">
            <span class="btn btn-light btn-file">
                <i-bs name="image-fill"></i-bs><input #imageInput type="file" accept="image/png, image/gif, image/jpeg, image/bmp" (change)="addImage($event)">
            </span>

            <div #collapseImage="ngbCollapse" [(ngbCollapse)]="!isEditImage">
                <color-range [value]="this.currentColor" (change)="updateColor($event)"></color-range>
                <alpha-range (change)="updateAlpha($event)"></alpha-range>
            </div>
        </div>
        <div class="card">
            <button
                type="button"
                class="btn btn-light"
                (click)="this.toggleDrawing();"
                [ngClass]="{active: this.isDrawing}"
            ><i-bs name="pencil-fill"></i-bs></button>
            <div #collapseDrawing="ngbCollapse" [(ngbCollapse)]="!isDrawing">
                <color-range [value]="this.currentColor" (change)="this.updateColor($event)"></color-range>
                <label for="thickRange" class="form-label">Thickness</label>
                <input type="range" class="form-range" #thickRange [value]="this.currentThickness" max="100" (input)="updateThickness(thickRange.value)">
                <input class="form-control" type="text" #thickInput [value]="this.currentThickness" (change)="updateThickness(thickInput.value)">
            </div>
        </div>
        <div class="card">
            <button
                type="button"
                class="btn btn-danger"
                (click)="delete()"
            ><i-bs name="eraser-fill"></i-bs></button>
        </div>
    </div>
</div>
<button
    type="button"
    class="btn btn-primary"
    (click)="sign()"
>Sign!</button>
<button
    type="button"
    class="btn btn-danger"
    (click)="clear()"
>Clear</button>
