<style>
    .signature-pad-container canvas {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        overflow: hidden;
    }

    .signature-pad-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .signature-pad {
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
        object-fit: contain;
    }
    </style>

<div class="signature-pad-container mx-auto border p-4 max-w-md sm:max-w-lg lg:max-w-xl">
    <h3 class="signature-title text-md sm:text-lg  mb-2 uppercase">{{ ucfirst($type) }}</h3>
    <div class="w-full aspect-w-2 aspect-h-1">
        <canvas
            id="signature-pad-{{ $type }}"
            class="signature-pad w-full h-full bg-white border rounded"
        ></canvas>
    </div>
    <input
        type="text"
        class="input w-full border p-2 mt-2 rounded"
        name="name-{{ $type }}"
        id="name-{{ $type }}"
        placeholder="Enter your name"
    />
    <div class="button-container flex justify-between py-4">
        <button
            type="button"
            id="save-{{ $type }}"
            class="btn btn-primary px-4 py-2 rounded "
        >
            Save
        </button>
        <button
            type="button"
            id="clear-{{ $type }}"
            class="btn btn-light px-4 py-2 rounded"
        >
            Clear
        </button>
        <button
            type="button"
            id="delete-{{ $type }}"
            class="btn btn-danger text-white px-4 py-2 rounded hover:bg-red-600"
        >
            Delete
        </button>
    </div>
    <div id="status-{{ $type }}" class="status-message text-sm text-gray-600 mt-2"></div>
</div>
