{% extends "appbuilder/base.html" %}

{% block head_meta %}
    {{ super() }}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ url_for('wingman.static', filename='css/wingman_chat.css') }}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Banner -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Airflow Wingman</h3>
                </div>
                <div class="alert alert-info" style="margin: 15px;">
                    <p><strong>{{ interface_messages.model_recommendation.title }}:</strong> {{ interface_messages.model_recommendation.content }}</p>
                    <hr style="margin: 10px 0;">
                    <p><strong>{{ interface_messages.security_note.title }}:</strong> {{ interface_messages.security_note.content }}</p>
                    <hr style="margin: 10px 0;">
                    <p><strong>{{ interface_messages.context_window.title }}:</strong> {{ interface_messages.context_window.content }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Provider Selection</h3>
                </div>
                <div class="panel-body">
                    {% for provider_id, provider in models.items() %}
                    <div class="provider-section mb-3">
                        <h4 class="provider-name">{{ provider.name }}</h4>
                        {% for model in provider.models %}
                        <div class="radio model-option">
                            <label class="model-label" title="{{ model.description }}">
                                <input type="radio"
                                       name="model"
                                       value="{{ provider_id }}:{{ model.id }}"
                                       {% if model.default %}checked{% endif %}
                                       data-context-window="{{ model.context_window }}"
                                       data-provider="{{ provider_id }}"
                                       data-model-name="{{ model.name }}">
                                {{ model.name }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>

                <!-- Model Name Input -->
                <div class="panel-body" style="border-top: 1px solid #ddd; padding-top: 15px;">
                    <div class="form-group">
                        <label for="modelName">Model Name</label>
                        <input type="text" class="form-control" id="modelName" placeholder="Enter model name for OpenRouter" disabled>
                        <small class="form-text text-muted">Only required for OpenRouter provider</small>
                    </div>
                </div>

                <!-- API Key Input -->
                <div class="panel-body" style="border-top: 1px solid #ddd; padding-top: 15px;">
                    <div class="form-group">
                        <label for="api-key">API Key</label>
                        <input type="password"
                               class="form-control"
                               id="api-key"
                               placeholder="Enter API key for selected provider"
                               required
                               autocomplete="off">
                        <small class="text-muted">Your API key will be used for the selected provider</small>
                    </div>
                </div>


            </div>
        </div>

        <!-- Main Chat Window -->
        <div class="col-md-9">
            <div class="panel panel-default" style="height: calc(80vh - 250px); display: flex; flex-direction: column;">
                <div class="panel-body" style="flex-grow: 1; overflow-y: auto; padding: 15px;" id="chat-messages">
                    <!-- Messages will be dynamically added here -->
                </div>
                <div class="panel-footer" style="padding: 15px; background-color: white;">
                    <div class="row">
                        <div class="col-md-2">
                            <button class="btn btn-default btn-block" type="button" id="refresh-button" title="Start a new chat">
                                <i class="fa fa-refresh"></i> New Chat
                            </button>
                        </div>
                        <div class="col-md-10">
                            <div class="input-group">
                                <input type="text" class="form-control" id="message-input" placeholder="Type your message...">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" id="send-button">
                                        <i class="fa fa-paper-plane"></i> Send
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
<script src="{{ url_for('wingman.static', filename='js/wingman_chat.js') }}"></script>
{% endblock %}