<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Upload CSV File</title> {% include 'favicon.html' %} <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/layout.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/upload_page.css') }}" rel="stylesheet"> </head> <body class="d-flex flex-column"> {% include 'header.html' %} <main class="container mt-5 pt-4 flex-grow-1"> <div class="upload-container"> <div class="d-flex justify-content-between align-items-center mb-4"> <h1 class="h2"> {% if mode == "import" %} <i class="bi bi-upload me-2"></i>Import Items From CSV {% elif mode == "edit" %} <i class="bi bi-pencil-square me-2"></i>Update Items Using CSV {% endif %} </h1> </div> <!-- Flash messages (errors only) --> {% with messages = get_flashed_messages(category_filter=["error"]) %} {% if messages %} <div class="alert alert-danger error-details mb-4"> <h2 class="h5 mb-3">Errors found during submission:</h2> <ul class="mb-0"> {% for message in messages %} <li>{{ message }}</li> {% endfor %} </ul> </div> {% endif %} {% endwith %} <!-- Upload form card --> <div class="card shadow-sm"> <div class="card-body"> <form method="POST" enctype="multipart/form-data" {% if mode == "import" %} action="/import_from_csv" {% elif mode == "edit" %} action="/edit_using_csv" {% endif %}> <div class="mb-4"> <label for="file" class="form-label fw-bold">Select CSV File:</label> <input class="form-control form-control-lg" type="file" id="file" name="file" accept=".csv" required> <div class="form-text"> Please upload a properly formatted CSV file </div> </div> <div class="d-flex justify-content-end gap-3"> <a href="/" class="btn btn-outline-secondary">Cancel</a> <button type="submit" class="btn btn-primary px-4"> Upload </button> </div> </form> </div> </div> <!-- Optional help section --> <div class="mt-4"> <div class="accordion" id="helpAccordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#helpContent"> <i class="bi bi-question-circle me-2"></i> CSV Format Help </button> </h2> <div id="helpContent" class="accordion-collapse collapse" data-bs-parent="#helpAccordion"> <div class="accordion-body"> <p>Your CSV must include these columns (case-sensitive):</p> <ul class="list-unstyled"> {% for attrib in item_attributes %} <li> <code>{{ attrib.display_name }}</code> {% if attrib.required %}<span class="badge bg-danger ms-2">Required</span>{% endif %} {% if attrib.primary %}<span class="badge bg-primary ms-2">Primary</span>{% endif %} {% if attrib.unique %}<span class="badge bg-warning text-dark ms-2">Unique</span>{% endif %} </li> {% endfor %} </ul> <div class="alert alert-info mt-3"> <strong>Format requirements:</strong> <ul class="mt-2 mb-0"> <li>Delimiter: <code>|</code> (pipe character)</li> <li>First row must contain headers exactly as shown above</li> {% if mode == "edit" %} <li>Existing items must include their primary key value</li> {% endif %} </ul> </div> <a href="{{ url_for('uploadcsv.download_template') }}" class="btn btn-sm btn-outline-primary mt-2"> <i class="bi bi-download me-1"></i>Download CSV Template </a> </div> </div> </div> </div> </div> </div> </main> {% include 'footer.html' %} <!-- Bootstrap JS --> <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script> </body> </html>