{% extends "layout.html" %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-upload"></i> Upload Document</h2>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Upload New Document</h5>
            </div>
            <div class="card-body">
                <form method="post" action="{{ url_for('upload') }}" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="file" class="form-label">Select File</label>
                        <input type="file" class="form-control" id="file" name="file" required>
                        <div class="form-text">
                            Allowed file types: PDF, DOCX, XLSX, JPG, PNG, MP4, TXT
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="custom_filename" class="form-label">Custom File Name (Optional)</label>
                        <input type="text" class="form-control" id="custom_filename" name="custom_filename" placeholder="Enter a custom name for this file">
                        <div class="form-text">
                            If left blank, the original filename will be used
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="category" class="form-label">Category</label>
                        <select class="form-select" id="category" name="category" required>
                            {% for category in categories %}
                            <option value="{{ category }}" {% if category == 'general' %}selected{% endif %}>
                                {{ category|capitalize }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Visibility</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="visibility" id="private" value="private" checked>
                            <label class="form-check-label" for="private">
                                <i class="bi bi-lock"></i> Private (Only you can access)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="visibility" id="public" value="public">
                            <label class="form-check-label" for="public">
                                <i class="bi bi-globe"></i> Public (Anyone can access)
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-upload"></i> Upload Document
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Information</h5>
            </div>
            <div class="card-body">
                <h6>File Size Limits</h6>
                <p>Maximum file size: 16MB</p>
                
                <h6>Supported File Types</h6>
                <ul>
                    <li>Documents: PDF, DOCX, TXT</li>
                    <li>Spreadsheets: XLSX</li>
                    <li>Images: JPG, PNG</li>
                    <li>Videos: MP4</li>
                </ul>
                
                <h6>Categories</h6>
                <ul>
                    <li><strong>Admin:</strong> Administrative documents</li>
                    <li><strong>Accounting:</strong> Financial documents</li>
                    <li><strong>HR:</strong> Human resources documents</li>
                    <li><strong>Marketing:</strong> Marketing materials</li>
                    <li><strong>Legal:</strong> Legal documents</li>
                    <li><strong>General:</strong> General purpose documents</li>
                    <li><strong>Other:</strong> Miscellaneous documents</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}