{% extends 'base.html' %}{% load static %}
{% block title %}GENEZ Creative Production Studio{% endblock %}{% block breadcrumb %}Design Studio{% endblock %}
{% block content %}
<section class="genez-studio" id="genez-studio" data-upload-url="{{ asset_upload_url }}" data-asset-url-pattern="{{ asset_url_pattern }}" data-proof-upload-url="{{ proof_upload_url }}" data-design-id="{{ design.pk|default:'' }}">
<header class="gstudio-header">
  <div><div class="gstudio-kicker">GENEZ CREATIVE PRODUCTION STUDIO <span class="gstudio-dot">●</span> MULTI-PAGE WORKSPACE</div><h2>{% if design %}Edit your design{% else %}Create something remarkable.{% endif %}</h2><p>One production workspace for graphics, publicity, print collateral, campaigns and book layouts. Work solo or with your assigned creative team.</p></div>
  <div class="gstudio-header-actions"><span class="gstudio-state" id="gstudio-status" role="status" aria-live="polite">Ready to create</span><button class="btn outline small" type="button" id="studio-export">⇩ Export Page Image</button><button class="btn outline small" type="button" id="studio-export-pdf">⇩ Export Multi-page PDF</button>{% if can_submit_project_proof %}<button class="btn outline small" type="button" id="studio-send-proof">Send proof to customer</button>{% endif %}<button class="btn small" type="submit" form="studio-form" id="studio-save-top">Save draft</button></div>
</header>
{% if form.non_field_errors %}<div class="notice error">{{ form.non_field_errors }}</div>{% endif %}
<div class="v21-studio-guide" aria-label="Creative Studio workflow">
  <span><b>01</b> Choose the project type</span><span><b>02</b> Design and manage pages</span><span><b>03</b> Collaborate and save</span><span><b>04</b> Export or submit proof</span>
</div>
<div class="gstudio-layout">
  <aside class="gstudio-left" aria-label="Creative tools">
    <div class="gstudio-panel-title">Design tools <span class="v21-panel-hint">Choose a tool below</span></div>
    <div class="gstudio-tool-grid">
      <button type="button" class="gstudio-tool is-active" data-tool="templates"><span>▦</span> Templates</button>
      <button type="button" class="gstudio-tool" data-tool="text"><span>𝑻</span> Text</button>
      <button type="button" class="gstudio-tool" data-tool="images"><span>▧</span> Uploads</button>
      <button type="button" class="gstudio-tool" data-tool="shapes"><span>◩</span> Shapes</button><button type="button" class="gstudio-tool" data-tool="brand"><span>✦</span> Brand &amp; page</button>
    </div>
    <div class="gstudio-tool-content" data-pane="templates"><h4>Start with a template</h4><div class="gstudio-template-list">
      <button type="button" class="gstudio-template is-active" data-template="classic"><span class="gstudio-template-visual classic"></span><span><b>Bold flyer</b><small>Vibrant and modern</small></span></button>
      <button type="button" class="gstudio-template" data-template="corporate"><span class="gstudio-template-visual corporate"></span><span><b>Corporate</b><small>Professional layout</small></span></button>
      <button type="button" class="gstudio-template" data-template="minimal"><span class="gstudio-template-visual minimal"></span><span><b>Minimal</b><small>Clean editorial style</small></span></button><button type="button" class="gstudio-template" data-template="event"><span class="gstudio-template-visual event"></span><span><b>Events</b><small>Celebration and launch</small></span></button><button type="button" class="gstudio-template" data-template="product"><span class="gstudio-template-visual product"></span><span><b>Product spotlight</b><small>Feature one service</small></span></button><button type="button" class="gstudio-template" data-template="editorial"><span class="gstudio-template-visual editorial"></span><span><b>Editorial</b><small>Information-led layout</small></span></button>
    </div><p class="gstudio-hint">Switch templates without losing your text or uploaded images.</p></div>
    <div class="gstudio-tool-content" data-pane="text" hidden><h4>Add text</h4><button class="gstudio-add" type="button" data-add="heading">+ Add heading</button><button class="gstudio-add" type="button" data-add="subheading">+ Add subheading</button><button class="gstudio-add" type="button" data-add="body">+ Add body text</button><p class="gstudio-hint">Drag text on the canvas, then edit its settings on the right.</p></div>
    <div class="gstudio-tool-content" data-pane="images" hidden><h4>Your artwork</h4><label class="gstudio-upload" for="gstudio-image-input"><span>⇧</span><b>Upload an image or logo</b><small>PNG, JPEG or WebP · max 4 MB</small></label><input type="file" id="gstudio-image-input" accept="image/png,image/jpeg,image/webp" hidden><label class="gstudio-field">Asset name<input id="gstudio-asset-name" maxlength="100" placeholder="Company logo, campaign photo…"></label>{% if user.role == 'designer' or user.role == 'manager' or user.role == 'support' or user.is_staff %}<label class="gstudio-team-share"><input type="checkbox" id="gstudio-share-asset"> Add to shared creative-team library</label>{% endif %}<p class="gstudio-hint">Uploads are private by default. Choose the shared option to add an image to the creative-team library.</p><div id="gstudio-upload-state" role="status" aria-live="polite"></div><h4 class="gstudio-library-heading">Your saved assets</h4><div class="gstudio-asset-library">{% for asset in saved_assets %}<button type="button" class="gstudio-asset-card" data-existing-asset="{{ asset.pk }}" title="Add saved image to canvas"><img src="{% url 'studio_asset_file' asset.pk %}" alt=""><span>{{ asset.name|default:'Artwork' }}{% if asset.team_shared %} · Team{% endif %}</span></button>{% empty %}<p class="gstudio-hint">Uploaded artwork will appear here.</p>{% endfor %}</div></div>
    <div class="gstudio-tool-content" data-pane="shapes" hidden><h4>Elements &amp; shapes</h4><button class="gstudio-add" type="button" data-add="rect">▰ Rectangle</button><button class="gstudio-add" type="button" data-add="rounded_rect">▱ Rounded rectangle</button><button class="gstudio-add" type="button" data-add="ellipse">◯ Circle / oval</button><button class="gstudio-add" type="button" data-add="triangle">△ Triangle</button><button class="gstudio-add" type="button" data-add="star">☆ Star</button><button class="gstudio-add" type="button" data-add="line">━ Divider line</button></div>
    <div class="gstudio-tool-content" data-pane="brand" hidden><h4>Page &amp; brand kit</h4><label class="gstudio-field">Page background<input type="color" id="gstudio-page-color" value="#ffffff"></label><div class="gstudio-palette" aria-label="Quick brand color swatches"><button type="button" data-page-color="#06336e" style="--swatch:#06336e" aria-label="Navy"></button><button type="button" data-page-color="#0876d8" style="--swatch:#0876d8" aria-label="Blue"></button><button type="button" data-page-color="#FFA51B" style="--swatch:#FFA51B" aria-label="Orange"></button><button type="button" data-page-color="#15A77F" style="--swatch:#15A77F" aria-label="Green"></button><button type="button" data-page-color="#DE428E" style="--swatch:#DE428E" aria-label="Pink"></button><button type="button" data-page-color="#ffffff" style="--swatch:#ffffff" aria-label="White"></button></div><p class="gstudio-hint">Choose a page background and save color choices as part of each draft.</p></div>
    <div class="gstudio-tool-footer"><span class="gstudio-lock">♧</span> Your draft is private. Exports are previews, not press-ready production files.</div>
  </aside>
  <section class="gstudio-center" id="genez-canvas-workspace" aria-label="Artwork canvas">
    <div class="gstudio-canvas-toolbar"><div class="gstudio-toolbar-left"><span class="gstudio-size-dot"></span><label class="gstudio-format-control">Page size<select id="studio-format"><option value="portrait">Portrait flyer</option><option value="landscape">Landscape flyer</option><option value="a3">A3 print</option><option value="a4">A4 print</option><option value="a5">A5 / book page</option><option value="letter">US Letter</option><option value="business_card">Business card</option><option value="postcard">Postcard</option><option value="square">Square artwork</option><option value="story">Story / poster</option><option value="banner_wide">Wide banner</option></select></label><small id="studio-format-label">Portrait flyer · 900 × 1200 px</small></div><div class="gstudio-canvas-actions"><button class="gstudio-icon-btn" type="button" id="studio-grid" title="Toggle grid" aria-label="Toggle grid">▦</button><button class="gstudio-icon-btn" type="button" id="studio-safe" title="Toggle safe area" aria-label="Toggle safe area">▣</button><button class="gstudio-icon-btn is-active" type="button" id="studio-snap" title="Toggle snap to grid" aria-label="Toggle snap to grid">⌖</button><button class="gstudio-icon-btn" type="button" id="studio-undo" title="Undo" aria-label="Undo">↶</button><button class="gstudio-icon-btn" type="button" id="studio-redo" title="Redo" aria-label="Redo">↷</button><button class="gstudio-icon-btn" type="button" id="studio-deselect" title="Deselect" aria-label="Deselect">⤢</button></div></div>
    <div class="gstudio-page-manager"><div class="gstudio-page-actions"><button type="button" id="studio-page-prev" title="Previous page">←</button><button type="button" id="studio-page-add">+ Add page</button><button type="button" id="studio-page-duplicate">Duplicate page</button><button type="button" id="studio-page-delete" class="danger">Delete page</button><button type="button" id="studio-page-up" title="Move page earlier">↑</button><button type="button" id="studio-page-down" title="Move page later">↓</button><button type="button" id="studio-page-next" title="Next page">→</button><span id="gstudio-page-count">Page 1 of 1</span></div><div id="gstudio-pages" class="gstudio-page-strip" aria-label="Document pages"></div><small>Book interiors and campaign sets can contain up to 80 pages.</small></div>
    <div class="gstudio-artboard-area"><canvas id="studio-artboard" width="900" height="1200" tabindex="0" aria-label="Interactive flyer design canvas; select a layer to move or edit it"></canvas></div>
    <div class="gstudio-canvas-foot"><span>↔ Drag to move · Arrow keys nudge · Ctrl/⌘+D duplicates</span><label>Zoom <input id="studio-zoom" type="range" min="60" max="130" value="100"><span id="studio-zoom-value">100%</span></label><span>PDF output is raster artwork; check bleed, colour and final trim with production.</span></div>
  </section>
  <aside class="gstudio-right" id="genez-design-properties" aria-label="Design properties">
    <form method="post" id="studio-form" novalidate>{% csrf_token %}<input type="hidden" id="studio-canvas-state" name="canvas_state">{% if selected_product %}<input type="hidden" name="product_id" value="{{ selected_product.pk }}">{% endif %}
      {% if customer_project %}<div class="v5-studio-product v5-studio-task"><span class="v5-chip">{{ customer_project.get_creative_type_display|upper }} · {{ customer_project.reference }}</span><strong>{{ customer_project.title }}</strong><small>Customer: {{ customer_project.customer.get_full_name|default:customer_project.customer.username }}{% if customer_project.design_team.exists %} · Shared design team{% endif %}{% if customer_project.requested_date %} · Requested by {{ customer_project.requested_date|date:'d M Y' }}{% endif %}</small><p>{{ customer_project.brief|linebreaksbr }}</p><a class="small" href="{% url 'genez_project_detail' customer_project.pk %}">Return to project discussion and upload proof →</a><input type="hidden" name="project_id" value="{{ customer_project.pk }}"></div>{% endif %}{% if selected_product %}<div class="v5-studio-product"><span class="v5-chip">Linked to product</span><strong>{{ selected_product.name }}</strong><small>Save this draft to attach it to an order.</small></div>{% endif %}
      <div class="gstudio-panel-title">Design properties</div>
      <label class="gstudio-field">Project name{{ form.title }}{% for error in form.title.errors %}<span class="form-error">{{ error }}</span>{% endfor %}</label>
      {% if customer_project %}<div class="gstudio-field"><span class="small muted">Project type</span><strong>{{ customer_project.get_creative_type_display }}</strong></div>{% else %}<label class="gstudio-field">Project type{{ form.project_type }}{% for error in form.project_type.errors %}<span class="form-error">{{ error }}</span>{% endfor %}</label>{% endif %}<label class="gstudio-field">Project title{{ form.title }}{% for error in form.title.errors %}<span class="form-error">{{ error }}</span>{% endfor %}</label><label class="gstudio-field">Primary message{{ form.headline }}{% for error in form.headline.errors %}<span class="form-error">{{ error }}</span>{% endfor %}</label>
      <label class="gstudio-field">Color theme{{ form.theme }}{% for error in form.theme.errors %}<span class="form-error">{{ error }}</span>{% endfor %}</label>
      <div class="gstudio-divider"></div><div class="gstudio-panel-title">Selected layer</div>
      <div id="gstudio-no-selection" class="gstudio-empty-selection">Select any text, image or shape on the artwork to customize it.</div>
      <div id="gstudio-selection" hidden><label class="gstudio-field">Layer name<input id="gstudio-layer-name" maxlength="60"></label><label class="gstudio-field" id="gstudio-text-field">Text <textarea rows="3" id="gstudio-layer-text" maxlength="5000"></textarea></label>
      <div class="gstudio-control-row"><label class="gstudio-field">Color<input type="color" id="gstudio-layer-color" value="#123D77"></label><label class="gstudio-field">Opacity<input type="number" min="0" max="100" step="5" id="gstudio-layer-opacity" value="100"></label></div>
      <div id="gstudio-font-controls"><label class="gstudio-field">Font <select id="gstudio-layer-font"><option>Arial</option><option>Georgia</option><option>Verdana</option><option>Trebuchet MS</option><option>Times New Roman</option><option>Impact</option><option>Courier New</option></select></label><div class="gstudio-check-row"><label><input type="checkbox" id="gstudio-layer-bold"> Bold</label><label><input type="checkbox" id="gstudio-layer-italic"> Italic</label></div><div class="gstudio-control-row"><label class="gstudio-field">Size <input type="number" id="gstudio-layer-size" min="6" max="240" value="52"></label><label class="gstudio-field">Align<select id="gstudio-layer-align"><option value="left">Left</option><option value="center">Center</option><option value="right">Right</option></select></label></div></div>
      <div class="gstudio-control-row"><label class="gstudio-field">X<input type="number" id="gstudio-layer-x" min="-900" max="2400"></label><label class="gstudio-field">Y<input type="number" id="gstudio-layer-y" min="-1200" max="3200"></label></div><div class="gstudio-control-row"><label class="gstudio-field">Width <input type="number" id="gstudio-layer-width" min="1" max="2400" value="400"></label><label class="gstudio-field">Height <input type="number" id="gstudio-layer-height" min="1" max="3200" value="100"></label></div><div class="gstudio-control-row"><label class="gstudio-field">Rotation<input type="number" id="gstudio-layer-rotation" min="0" max="360" value="0"></label><label class="gstudio-field" id="gstudio-layer-fit-wrap">Image fit<select id="gstudio-layer-fit"><option value="cover">Fill frame</option><option value="contain">Fit image</option></select></label></div><div class="gstudio-control-row"><label class="gstudio-field">Outline color<input type="color" id="gstudio-layer-stroke" value="#113b77"></label><label class="gstudio-field">Outline width<input type="number" id="gstudio-layer-stroke-width" min="0" max="80" value="0"></label></div><div class="gstudio-align-actions"><button type="button" id="gstudio-align-x">Center horizontally</button><button type="button" id="gstudio-align-y">Center vertically</button></div>
      <div class="gstudio-row-actions"><button type="button" id="gstudio-duplicate">Duplicate</button><button type="button" id="gstudio-lock">Lock layer</button><button type="button" id="gstudio-forward">Move up</button><button type="button" id="gstudio-backward">Move down</button><button type="button" id="gstudio-remove" class="danger">Delete</button></div></div>
      <div class="gstudio-divider"></div><div class="gstudio-panel-title">Layers <span id="gstudio-layer-count" class="muted">0</span></div><div class="gstudio-layers" id="gstudio-layers"></div>
      <button class="btn block gstudio-save" type="submit">✓ Save design draft</button>{% if can_submit_project_proof %}<p class="gstudio-hint">Send proof saves the draft, creates a versioned customer preview and opens the project discussion.</p>{% endif %}
    </form>
  </aside>
</div>
</section>
{{ canvas_json|json_script:'gstudio-existing-data' }}
<script src="{% static 'js/genez-studio-v6.js' %}" defer></script>
{% endblock %}