team-tryouts/app/templates/pages/contracts.html

{% extends "layouts/base.html" %}
{% block title %}Contracts - TryoutPro{% endblock %}
{% block page_title %}Contracts{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="{{ url_for('users.profile') }}">Profile</a> / Contracts</span>{% endblock %}

{% block header_actions %}
{% if current_user.role in ['admin', 'manager', 'coach'] %}
<a href="{{ url_for('users.upload_contract') }}" class="btn btn-primary">
    <i class="fas fa-upload"></i> Upload Contract
</a>
{% endif %}
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-file-contract"></i> Contract Dropbox</h3>
    </div>
    <div class="card-body">
        {% if contracts %}
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Player</th>
                        <th>Team</th>
                        <th>Contract</th>
                        <th>Status</th>
                        <th>Uploaded</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contract in contracts %}
                    <tr>
<td>{{ contract.player.username }}</td>
                        <td>{{ contract.team.name if contract.team else 'N/A' }}</td>
                        <td>{{ contract.original_filename }}</td>
                        <td>
                            {% if contract.status == 'signed' %}
                            <span class="badge badge-success">Signed</span>
                            {% else %}
                            <span class="badge badge-warning">Pending Signature</span>
                            {% endif %}
                        </td>
                        <td>{{ contract.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <div class="btn-group">
                                <a href="{{ url_for('users.download_contract', contract_id=contract.id) }}" class="btn btn-sm btn-primary" title="Download">
                                    <i class="fas fa-download"></i> Download
                                </a>
                                {% if contract.signed_file_path %}
                                <a href="{{ url_for('users.download_signed_contract', contract_id=contract.id) }}" class="btn btn-sm btn-success" title="Download Signed">
                                    <i class="fas fa-file-signature"></i> Signed
                                </a>
                                {% endif %}
                                {% if current_user.role == 'player' and contract.status == 'pending' %}
                                <button class="btn btn-sm btn-warning" data-action="show-upload-signed" data-contract-id="{{ contract.id }}" title="Upload Signed Contract">
                                    <i class="fas fa-upload"></i> Return Signed
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">
            <i class="fas fa-file-contract"></i>
            <h4>No contracts found</h4>
            {% if current_user.role == 'player' %}
            <p>No contracts have been uploaded for you yet. Contact your coach or manager.</p>
            {% else %}
            <p>No contracts have been uploaded yet. Upload a contract using the button above.</p>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

{% if current_user.role == 'player' %}
<!-- Upload Signed Contract Modal -->
<div id="uploadSignedModal" class="modal hidden">
    <div class="modal-backdrop" data-action="hide-upload-signed"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3>Upload Signed Contract</h3>
            <button class="modal-close" data-action="hide-upload-signed">&times;</button>
        </div>
        <div class="modal-body">
            <form id="uploadSignedForm" method="POST" enctype="multipart/form-data" class="form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="form-group">
                    <label for="signed_file">Select Signed Contract File</label>
                    <input type="file" id="signed_file" name="signed_file" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" required>
                    <small class="form-text text-muted">Accepted formats: PDF, DOC, DOCX, JPG, PNG</small>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" data-action="hide-upload-signed">Cancel</button>
                    <button type="submit" class="btn btn-primary">Upload Signed Contract</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script nonce="{{ csp_nonce }}">
function showUploadSignedForm(contractId) {
    document.getElementById('uploadSignedForm').action = '/users/contracts/' + contractId + '/upload_signed';
    document.getElementById('uploadSignedModal').classList.remove('hidden');
}

function hideUploadSignedForm() {
    document.getElementById('uploadSignedModal').classList.add('hidden');
}

// Behaviours are declared in the markup with data-action / data-change and
// dispatched by the delegated listener in main.js. This replaces inline
// onclick attributes, which no CSP nonce is able to authorise.
registerActions({
    'show-upload-signed': function (element) {
        showUploadSignedForm(element.getAttribute('data-contract-id'));
    },
    'hide-upload-signed': hideUploadSignedForm,
});
</script>
{% endblock %}