{% 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 Management</h2>
    
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title">Companies</h5>
                <a href="{{ url_for('auth.create_company') }}" class="btn btn-primary">Create New Company</a>
            </div>
            
            <div class="table-responsive mt-3">
                <table class="table table-striped" id="companiesTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for company in companies %}
                        <tr>
                            <td>{{ company.name }}</td>
                            <td>{{ company.description }}</td>
                            <td>{{ company.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ url_for('auth.edit_company', company_id=company.id) }}" class="btn btn-sm btn-primary">Edit</a>
                                    <a href="{{ url_for('auth.company_users', company_id=company.id) }}" class="btn btn-sm btn-info">Manage Users</a>
                                    <a href="{{ url_for('auth.company_api_keys', company_id=company.id) }}" class="btn btn-sm btn-secondary">Sites (API Key)</a>
                                    <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteCompanyModal{{ company.id }}">
                                        Delete
                                    </button>
                                </div>
                                
                                <!-- Delete Confirmation Modal -->
                                <div class="modal fade" id="deleteCompanyModal{{ company.id }}" tabindex="-1" aria-labelledby="deleteCompanyModalLabel{{ company.id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteCompanyModalLabel{{ company.id }}">Confirm Deletion</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                Are you sure you want to delete the company: <strong>{{ company.name }}</strong>?
                                                <p class="text-danger mt-2">This action cannot be undone and will remove this company from the system. The company's API keys will be deleted and all users will be removed from this company (but users will not be deleted from the system).</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <form action="{{ url_for('auth.delete_company', company_id=company.id) }}" method="POST">
                                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                    <button type="submit" class="btn btn-danger">Delete Company</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </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() {
    $('#companiesTable').DataTable({
        "pageLength": 10,
        "order": [[0, "asc"]]
    });
});
</script>
{% endblock %}