{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Sources" %} | {% trans "Recruitment System" %}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-database me-2"></i>
            {% trans "Data Sources" %}
        </h1>
        <a href="{% url 'source_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>
            {% trans "Create New Source" %}
        </a>
    </div>

    <!-- Search Bar -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-10">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" name="search" class="form-control"
                               placeholder="{% trans 'Search by name, type, or description...' %}"
                               value="{{ search_query }}">
                    </div>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-secondary w-100">
                        <i class="fas fa-filter me-2"></i>
                        {% trans "Filter" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Sources List -->
    <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                {% trans "Available Sources" %}
            </h6>
            <span class="badge bg-secondary">
                {{ page_obj.paginator.count }} {% trans "sources" %}
            </span>
        </div>
        <div class="card-body">
            {% if sources %}
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{% trans "Name" %}</th>
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "API Key" %}</th>
                                <th>{% trans "Created By" %}</th>
                                <th>{% trans "Created At" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for source in sources %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <div class="icon-circle bg-primary text-white">
                                                    <i class="fas fa-server"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="fw-bold">{{ source.name }}</div>
                                                <small class="text-muted">{{ source.description|truncatewords:10 }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ source.source_type }}</span>
                                    </td>
                                    <td>
                                        {% if source.is_active %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                {% trans "Active" %}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-danger">
                                                <i class="fas fa-times-circle me-1"></i>
                                                {% trans "Inactive" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if source.api_key %}
                                            <code class="text-muted">{{ source.api_key|slice:":8" }}...</code>
                                        {% else %}
                                            <span class="text-muted">
                                                <i class="fas fa-key me-1"></i>
                                                {% trans "Not generated" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>{{ source.created_by }}</td>
                                    <td>{{ source.created_at|date:"M d, Y" }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{% url 'source_detail' source.pk %}"
                                               class="btn btn-sm btn-outline-primary"
                                               title="{% trans 'View Details' %}">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{% url 'source_update' source.pk %}"
                                               class="btn btn-sm btn-outline-secondary"
                                               title="{% trans 'Edit' %}">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{% url 'source_delete' source.pk %}"
                                               class="btn btn-sm btn-outline-danger"
                                               title="{% trans 'Delete' %}">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}"
                                       aria-label="{% trans 'First' %}">
                                        <span aria-hidden="true">&laquo;&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}"
                                       aria-label="{% trans 'Previous' %}">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ num }}</span>
                                    </li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}"
                                       aria-label="{% trans 'Next' %}">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}"
                                       aria-label="{% trans 'Last' %}">
                                        <span aria-hidden="true">&raquo;&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">{% trans "No sources found" %}</h5>
                    <p class="text-muted mb-4">
                        {% trans "Get started by creating your first data source." %}
                    </p>
                    <a href="{% url 'source_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>
                        {% trans "Create Source" %}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Add any DataTables initialization or other JavaScript here
});
</script>
{% endblock %}