<?php
/**
 * Diálogo de imagen (original / recorte) — mismo flujo que el instalador Flexia.
 */
?>
<dialog class="logo-editor-dialog" id="installImageEditorDialog" aria-labelledby="installImageEditorTitle">
  <div class="logo-editor-inner">
    <h3 class="logo-editor-title" id="installImageEditorTitle">Imagen</h3>
    <div class="logo-modal-mode" role="radiogroup" aria-label="Modo de imagen">
      <label><input type="radio" name="install_image_modal_mode" value="original" checked> Mantener original</label>
      <label><input type="radio" name="install_image_modal_mode" value="crop" id="installImageModalModeCrop"> Recortar</label>
    </div>
    <div class="logo-modal-preview-block" id="installImageModalPreviewBlock">
      <span class="muted">Vista previa</span>
      <div class="logo-modal-preview-wrap">
        <img src="" alt="" id="installImageModalPreviewImg" />
      </div>
    </div>
    <div class="logo-modal-crop-wrap" id="installImageModalCropWrap" hidden>
      <span class="muted" style="font-size:.78rem;display:block;margin-bottom:.35rem" id="installImageModalCropHint">Ajusta el encuadre y pulsa «Fijar recorte» (512 px).</span>
      <div class="logo-modal-crop-stage">
        <img src="" alt="" id="installImageModalCropImg" />
      </div>
      <div class="logo-modal-crop-actions">
        <button type="button" class="btn" id="installImageModalApplyCropBtn">Fijar recorte</button>
        <button type="button" class="btn btn-ghost" id="installImageModalRedoCropBtn" hidden>Volver a ajustar el recorte</button>
      </div>
    </div>
    <div class="logo-modal-frame-wrap" id="installImageModalFrameWrap" hidden>
      <span class="muted" style="font-size:.78rem;display:block;margin-bottom:.35rem" id="installImageModalFrameHint">Encuadra cómo se verá en el avatar circular. Arrastra y usa el zoom.</span>
      <div class="profile-frame-viewport wizard-crop-viewport" id="installImageModalFrameViewport">
        <img src="" alt="" id="installImageModalFrameImg" hidden />
        <video id="installImageModalFrameVideo" muted playsinline loop autoplay hidden></video>
        <div class="wizard-crop-frame" aria-hidden="true"></div>
      </div>
      <div class="wizard-crop-zoom">
        <span>Zoom</span>
        <input type="range" id="installImageModalFrameZoom" min="100" max="300" value="100" />
      </div>
    </div>
    <div class="logo-editor-actions">
      <button type="button" class="btn btn-ghost" id="installImageModalCancelBtn">Cancelar</button>
      <button type="button" class="btn btn-primary" id="installImageModalAcceptBtn">Aceptar</button>
    </div>
  </div>
</dialog>
