expense_monitor/app/templates/expenses/create.html

{% extends 'base.html' %}
{% block content %}
<div class="card mx-auto" style="max-width: 1080px;">
  <div class="card-body p-4 p-lg-5">
    <div class="app-section-title">
      <span class="feature-icon"><i class="fa-solid fa-file-circle-plus"></i></span>
      <div>
        <h1 class="h3 mb-0">{{ t('expenses.edit') if expense else t('expenses.new') }}</h1>
        <div class="text-body-secondary">{{ t('expenses.form_subtitle') }}</div>
      </div>
    </div>
    <form method="post" enctype="multipart/form-data">
      {{ form.hidden_tag() }}
      <div class="row g-3">
        <div class="col-lg-7">
          <div class="row g-3">
            <div class="col-md-6">{{ form.amount.label(class='form-label') }}{{ form.amount(class='form-control') }}</div>
            <div class="col-md-6">{{ form.purchase_date.label(class='form-label') }}{{ form.purchase_date(class='form-control') }}</div>
            <div class="col-md-7">{{ form.category_id.label(class='form-label') }}{{ form.category_id(class='form-select') }}</div>
            <div class="col-md-5">{{ form.payment_method.label(class='form-label') }}{{ form.payment_method(class='form-select') }}</div>
            <div class="col-md-8">{{ form.title.label(class='form-label') }}{{ form.title(class='form-control', placeholder=t('expenses.placeholder_title')) }}</div>
            <div class="col-md-4">{{ form.currency.label(class='form-label') }}{{ form.currency(class='form-select') }}</div>
            <div class="col-md-6">{{ form.vendor.label(class='form-label') }}{{ form.vendor(class='form-control', placeholder=t('expenses.placeholder_vendor')) }}</div>
            <div class="col-md-6">
              {{ form.document.label(class='form-label') }}
              <div class="upload-actions d-grid gap-2" id="documentUploadActions">
                <button class="btn btn-outline-primary d-none" type="button" id="cameraCaptureButton"><i class="fa-solid fa-camera me-2"></i>{{ t('expenses.take_photo') }}</button>
                <button class="btn btn-outline-secondary" type="button" id="filePickerButton"><i class="fa-solid fa-upload me-2"></i>{{ t('expenses.select_files') }}</button>
              </div>
              <div class="drop-upload-zone mt-2 d-none d-lg-flex" id="dropUploadZone"><i class="fa-solid fa-cloud-arrow-up me-2"></i><span>{{ t('expenses.drop_files_here') }}</span></div><div class="form-text mt-2" id="documentInputHint" data-desktop-hint="{{ t('expenses.upload_hint_desktop') }}" data-mobile-hint="{{ t('expenses.upload_hint_mobile') }}">{{ t('expenses.upload_hint_desktop') }}</div>
              {{ form.document(class='d-none', id='documentInput', accept='.jpg,.jpeg,.png,.heic,.pdf,image/*,application/pdf', multiple=true) }}
            </div>
            <div class="col-12">{{ form.description.label(class='form-label') }}{{ form.description(class='form-control', rows='3', placeholder=t('expenses.placeholder_description')) }}</div>
            <div class="col-md-5">{{ form.tags.label(class='form-label') }}{{ form.tags(class='form-control', placeholder=t('expenses.placeholder_tags')) }}</div>
            <div class="col-md-3">{{ form.status.label(class='form-label') }}{{ form.status(class='form-select') }}</div>
            <div class="col-md-4">{{ form.recurring_period.label(class='form-label') }}{{ form.recurring_period(class='form-select') }}</div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="card h-100 document-editor-card"><div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h2 class="h5 mb-0"><i class="fa-solid fa-wand-magic-sparkles me-2"></i>{{ t('expenses.document_tools') }}</h2>
              <span class="badge soft-badge">{{ t('expenses.webp_preview') }}</span>
            </div>
            <div class="document-editor-toolbar mb-3 d-flex flex-wrap gap-2">
              <button class="btn btn-sm btn-outline-secondary js-rotate" type="button" data-step="-90"><i class="fa-solid fa-rotate-left me-1"></i>-90°</button>
              <button class="btn btn-sm btn-outline-secondary js-rotate" type="button" data-step="90"><i class="fa-solid fa-rotate-right me-1"></i>+90°</button>
              <button class="btn btn-sm btn-outline-secondary js-scale" type="button" data-step="-10"><i class="fa-solid fa-magnifying-glass-minus me-1"></i>-10%</button>
              <button class="btn btn-sm btn-outline-secondary js-scale" type="button" data-step="10"><i class="fa-solid fa-magnifying-glass-plus me-1"></i>+10%</button>
              <button class="btn btn-sm btn-outline-secondary" type="button" id="editorReset"><i class="fa-solid fa-arrows-rotate me-1"></i>{{ t('common.reset') }}</button>
            </div>
            <div class="editor-meta row g-2 mb-3">
              <div class="col-6">{{ form.rotate.label(class='form-label small') }}{{ form.rotate(class='form-control', readonly=true, id='rotateField') }}</div>
              <div class="col-6">{{ form.scale_percent.label(class='form-label small') }}{{ form.scale_percent(class='form-control', readonly=true, id='scaleField') }}</div>
            </div>
            <div class="document-preview-shell">
              <div id="documentPreviewStage" class="document-preview-stage">
                <img id="documentPreviewImage" alt="preview" class="d-none">
                <div id="documentPreviewEmpty" class="document-preview-empty"><i class="fa-regular fa-image"></i><div>{{ t('expenses.upload_to_edit') }}</div></div>
                <div id="cropSelection" class="crop-selection d-none"></div>
              </div>
            </div>
            <div class="footer-note mt-3">{{ t('expenses.crop_note') }}</div>
            {% if expense and expense.attachments %}<div class="mt-3"><div class="small text-body-secondary mb-2">Existing files</div><div class="d-flex flex-wrap gap-2">{% for item in expense.attachments %}{% if item.preview_filename %}<a class="d-inline-block" target="_blank" href="{{ url_for('static', filename='previews/' ~ item.preview_filename) }}"><img class="expense-row-thumb" src="{{ url_for('static', filename='previews/' ~ item.preview_filename) }}" alt="preview"></a>{% else %}<span class="badge text-bg-secondary">{{ item.original_filename }}</span>{% endif %}{% endfor %}</div></div>{% endif %}
            <div class="d-flex gap-3 mt-3 flex-wrap"><div class="form-check">{{ form.is_refund(class='form-check-input') }} {{ form.is_refund.label(class='form-check-label') }}</div><div class="form-check">{{ form.is_business(class='form-check-input') }} {{ form.is_business.label(class='form-check-label') }}</div></div>
          </div></div>
        </div>
      </div>
      <button class="btn btn-primary mt-4 px-4"><i class="fa-solid fa-floppy-disk me-2"></i>{{ t('expenses.save') }}</button>
    </form>
  </div>
</div>
{% endblock %}