{**
  This script block passes the unique, secure AJAX URL from the PHP controller to our JavaScript.
  The 'javascript' escaper is crucial to prevent encoding issues.
**}
<script type="text/javascript">
    var addLivePhotoAjaxUrl = '{$ajax_url|escape:'javascript':'UTF-8'}';
</script>

<div class="panel">
    <div class="panel-heading">
        <i class="icon-camera"></i> {l s='Live Photo Uploader' d='Modules.Addlivephoto.Admin'}
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">

                {* --- The New Unified Camera Interface --- *}
                <div id="alp-camera-view" class="my-3">
                    <div id="alp-video-container" class="video-container">
                        {* The video feed will be attached here by JavaScript *}
                        <video id="alp-video" autoplay playsinline muted></video>

                        {* This overlay displays instructions and is the main tap target *}
                        <div id="alp-viewfinder-overlay">
                            <div id="alp-overlay-text"></div>
                        </div>

                        {* This canvas is used for capturing the frame but is not visible *}
                        <canvas id="alp-canvas" style="display: none;"></canvas>
                    </div>
                </div>

                {* --- Message Area (for non-critical feedback) --- *}
                <div id="alp-message-area" class="alert" style="display: none; text-align: center;"></div>

                {* --- Product Information (hidden by default) --- *}
                <div id="alp-product-info" style="display: none;" class="card mt-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">{l s='Product Found' d='Modules.Addlivephoto.Admin'}</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>{l s='Name:' d='Modules.Addlivephoto.Admin'}</strong> <span id="alp-product-name"></span></p>
                        <p><strong>{l s='Prices:' d='Modules.Addlivephoto.Admin'}</strong> <span id="alp-product-prices"></span></p>
                    </div>
                </div>

                {* --- Existing Photos (hidden by default) --- *}
                <div id="alp-existing-photos" style="display: none;" class="card mt-4">
                     <div class="card-header">
                        <h5 class="card-title mb-0">{l s='Existing Live Photos' d='Modules.Addlivephoto.Admin'}</h5>
                    </div>
                    <div class="card-body">
                        <div id="alp-photos-container" class="d-flex flex-wrap gap-2">
                            {* JavaScript will populate this area *}
                        </div>
                    </div>
                </div>

                {* --- Settings Section (at the bottom, out of the way) --- *}
                <div class="card mt-4">
                    <div class="card-header">{l s='Camera Settings' d='Modules.Addlivephoto.Admin'}</div>
                    <div class="card-body">
                         <div class="form-group">
                            <label for="alp-camera-selector" class="control-label">{l s='Select Camera:' d='Modules.Addlivephoto.Admin'}</label>
                            <select id="alp-camera-selector" class="form-control"></select>
                        </div>
                    </div>
                </div>

                {* --- Manual Input Section (remains as a fallback) --- *}
                <div id="alp-manual-input" class="card mt-3">
                    <div class="card-header">{l s='Or Enter Manually' d='Modules.Addlivephoto.Admin'}</div>
                    <div class="card-body">
                        <form id="alp-manual-form" class="form-inline">
                            <div class="form-group">
                                <label for="alp-manual-identifier" class="mr-2">{l s='Product ID or EAN13 Barcode:' d='Modules.Addlivephoto.Admin'}</label>
                                <input type="text" id="alp-manual-identifier" class="form-control mr-2" placeholder="e.g., 4006381333931">
                            </div>
                            <button type="submit" class="btn btn-default"><i class="icon-search"></i> {l s='Find Product' d='Modules.Addlivephoto.Admin'}</button>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>