{% extends "base.html" %}

{% block head %}
<!-- DataTables CSS -->
<link href="{{ url_for('static', filename='css/dataTables.bootstrap5.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/buttons.bootstrap5.min.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>{{ company.name }} - Sites (API Keys)</h2>
    
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">Create New API Key</h5>
                <a href="{{ url_for('auth.download_agent', company_id=company.id) }}" class="btn btn-success">
                    <i class="fas fa-download"></i> Download Windows Agent
                </a>
            </div>
            <form method="POST" action="{{ url_for('auth.create_company_api_key', company_id=company.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="mb-3">
                    <label for="description" class="form-label">Site Name</label>
                    <input type="text" class="form-control" id="description" name="description" required>
                </div>
                <button type="submit" class="btn btn-primary">Generate New Key</button>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Company Sites (API Keys)</h5>
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> These API keys can be used to authenticate windows agents. You can 
                <a href="{{ url_for('auth.download_agent', company_id=company.id) }}">download a pre-configured agent</a> 
                with your selected API key.
            </div>
            <div class="table-responsive">
                <table class="table table-striped" id="apiKeysTable">
                    <thead>
                        <tr>
                            <th>Site Name</th>
                            <th>Key</th>
                            <th>Created</th>
                            <th>Last Used</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for api_key in api_keys %}
                        <tr>
                            <td>{{ api_key.description }}</td>
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="{{ api_key.key }}" readonly>
                                    <button class="btn btn-outline-secondary copy-btn" type="button" data-key="{{ api_key.key }}">
                                        Copy
                                    </button>
                                </div>
                            </td>
                            <td>{{ api_key.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            <td>{{ api_key.last_used.strftime('%Y-%m-%d %H:%M:%S') if api_key.last_used else 'Never' }}</td>
                            <td>
                                <form action="{{ url_for('auth.delete_company_api_key', company_id=company.id, key_id=api_key.id) }}" method="POST" 
                                      style="display:inline" onsubmit="return confirm('Are you sure you want to delete this API key?');">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <div class="mt-3">
                <a href="{{ url_for('auth.manage_companies') }}" class="btn btn-secondary">Back to Companies</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- DataTables JS -->
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap5.min.js') }}"></script>

<script>
$(document).ready(function() {
    $('#apiKeysTable').DataTable({
        "pageLength": 10,
        "order": [[2, "desc"]]
    });
    
    document.querySelectorAll('.copy-btn').forEach(button => {
        button.addEventListener('click', function() {
            const key = this.dataset.key;
            navigator.clipboard.writeText(key).then(() => {
                this.textContent = 'Copied!';
                setTimeout(() => this.textContent = 'Copy', 2000);
            });
        });
    });
});
</script>
{% endblock %}