{% extends "layouts/base.html" %}
{% block title %}{{ _('Add Personal Note') }} - TryoutPro{% endblock %}
{% block page_title %}{{ _('Add Personal Note') }}{% endblock %}
{% block breadcrumb %}
<span class="breadcrumb">
    Home / <a href="{{ url_for('tryouts.list_tryouts') }}">Tryouts</a>
    {% if context_type == 'tryout' %}
    / <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}">{{ tryout.title }}</a>
    / Add Note
    {% elif context_type == 'match' %}
    / <a href="{{ url_for('tryouts.view_tryout', tryout_id=tryout.tryout.id) }}">{{ tryout.tryout.title }}</a>
    / Add Note
    {% else %}
    / Add Note
    {% endif %}
</span>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-sticky-note"></i> {{ _('Add Personal Note') }}</h3>
        {% if context_type == 'tryout' %}
        <p class="text-muted small">Context: <strong>Tryout - {{ tryout.title }}</strong></p>
        {% elif context_type == 'match' %}
        <p class="text-muted small">Context: <strong>Match - {{ match.title }}</strong></p>
        {% endif %}
    </div>
    <div class="card-body">
        <form method="POST" action="
            {% if context_type == 'tryout' %}
                {{ url_for('users.add_note_from_tryout', tryout_id=tryout.id) }}
            {% elif context_type == 'match' %}
                {{ url_for('users.add_note_from_match', match_id=match.id) }}
            {% else %}
                {{ url_for('users.add_personal_note') }}
            {% endif %}
        " class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            {% if context_type == 'tryout' %}
            <input type="hidden" name="tryout_id" value="{{ tryout.id }}">
            {% elif context_type == 'match' %}
            <input type="hidden" name="match_id" value="{{ match.id }}">
            {% endif %}
            
            <div class="form-group">
                <label for="player_id">{{ _('Player') }}</label>
                <select name="player_id" id="player_id" class="form-select" required>
                    <option value="">{{ _('-- Select a player --') }}</option>
                    {% for player in players %}
                    <option value="{{ player.id }}" {% if preselected_player_id == player.id %}selected{% endif %}>
{{ player.username }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="content">{{ _('Note Content') }}</label>
                <textarea name="content" id="content" rows="6" class="form-textarea" placeholder="{{ _('Enter your coaching notes...') }}" required></textarea>
            </div>
            
            {% if context_type != 'tryout' and context_type != 'match' %}
            <div class="form-group">
                <label for="tryout_id">{{ _('Link to Tryout (Optional)') }}</label>
                <select name="tryout_id" id="tryout_id" class="form-select">
                    <option value="">{{ _('-- No tryout --') }}</option>
                    {% for t in tryouts %}
                    <option value="{{ t.id }}">{{ t.title }} ({{ t.date.strftime('%Y-%m-%d') }})</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="match_id">{{ _('Link to Match (Optional)') }}</label>
                <select name="match_id" id="match_id" class="form-select">
                    <option value="">{{ _('-- No match --') }}</option>
                    {% for m in matches %}
                    <option value="{{ m.id }}">{{ m.title }} ({{ m.date.strftime('%Y-%m-%d') }})</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="team_id">{{ _('Link to Team (Optional)') }}</label>
                <select name="team_id" id="team_id" class="form-select">
                    <option value="">{{ _('-- No team --') }}</option>
                    {% for team in teams %}
                    <option value="{{ team.id }}">{{ team.name }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            
            {% if team_notes %}
            <div class="form-group">
                <label>{{ _('Team Notes (Reference)') }}</label>
                <div class="team-notes-reference">
                    {% for note in team_notes %}
                    <div class="note-reference-item">
<small class="text-muted">{{ note.created_at.strftime('%Y-%m-%d') }} - {{ note.coach.username }}:</small>
                        <p>{{ note.content[:200] }}{% if note.content|length > 200 %}...{% endif %}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <div class="form-actions">
                <a href="
                    {% if context_type == 'tryout' %}
                        {{ url_for('tryouts.view_tryout', tryout_id=tryout.id) }}
                    {% elif context_type == 'match' %}
                        {{ url_for('tryouts.view_tryout', tryout_id=tryout.tryout.id) }}
                    {% else %}
                        {{ url_for('users.notes_dashboard') }}
                    {% endif %}
                " class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {{ _('Add Note') }}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.team-notes-reference {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-secondary);
}
.note-reference-item {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.note-reference-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.note-reference-item p {
    margin: 5px 0 0 0;
    font-style: italic;
}
</style>
{% endblock %}