527 lines
29 KiB
HTML
527 lines
29 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ agency.name }} - {% trans "Agency Details" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
|
|
<!-- Header Breadcrumb -->
|
|
<nav class="mb-4" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
|
|
<i data-lucide="home" class="w-4 h-4"></i> {% trans "Home" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li><a href="{% url 'agency_list' %}" class="text-gray-500 hover:text-temple-red transition">
|
|
{% trans "Agencies" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-temple-red font-semibold">{{ agency.name }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
|
|
<div class="flex-1">
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 flex items-center gap-3 mb-2">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="building" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{{ agency.name }}
|
|
</h1>
|
|
<p class="text-gray-500">
|
|
{% trans "Hiring Agency Details and Application Management" %}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{% url 'agency_assignment_list' %}"
|
|
class="inline-flex items-center gap-2 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="list-todo" class="w-4 h-4"></i>
|
|
{% trans "Assignments" %}
|
|
</a>
|
|
<a href="{% url 'agency_assignment_create_with_agency' agency.slug %}"
|
|
class="inline-flex items-center gap-2 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
|
{% trans "Assign Job" %}
|
|
</a>
|
|
<a href="{% url 'agency_update' agency.slug %}"
|
|
class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
|
{% trans "Edit" %}
|
|
</a>
|
|
<a href="{% url 'agency_list' %}"
|
|
class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agency Info Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="bg-gradient-to-r from-temple-red to-[#7a1a29] text-white p-6 md:p-8">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
|
|
<div class="flex-1">
|
|
<h2 class="text-xl md:text-2xl font-bold mb-3">{{ agency.name }}</h2>
|
|
{% if agency.contact_person %}
|
|
<p class="mb-2 flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
{% trans "Contact" %}: {{ agency.contact_person }}
|
|
</p>
|
|
{% endif %}
|
|
{% if agency.email %}
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
|
{{ agency.email }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
{% if agency.website %}
|
|
<a href="{{ agency.website }}" target="_blank"
|
|
class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm transition">
|
|
<i data-lucide="external-link" class="w-4 h-4"></i>
|
|
{% trans "Website" %}
|
|
</a>
|
|
{% endif %}
|
|
{% if agency.email %}
|
|
<a href="mailto:{{ agency.email }}"
|
|
class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm transition">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
{% trans "Email" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 md:p-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Contact Information -->
|
|
<div>
|
|
<div class="bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
|
|
<h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
|
|
<i data-lucide="address-book" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Contact Information" %}
|
|
</h5>
|
|
{% if agency.phone %}
|
|
<div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="phone" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Phone" %}</div>
|
|
<div class="text-gray-800">{{ agency.phone }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if agency.email %}
|
|
<div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Email" %}</div>
|
|
<div class="text-gray-800">{{ agency.email }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if agency.website %}
|
|
<div class="flex items-start gap-3">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="globe" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Website" %}</div>
|
|
<a href="{{ agency.website }}" target="_blank"
|
|
class="text-temple-red hover:text-[#7a1a29] transition">
|
|
{{ agency.website }}
|
|
<i data-lucide="external-link" class="w-3 h-3 inline ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Information -->
|
|
<div>
|
|
<div class="bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
|
|
<h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
|
|
<i data-lucide="map-pin" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Location Information" %}
|
|
</h5>
|
|
{% if agency.address %}
|
|
<div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="home" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Address" %}</div>
|
|
<div class="text-gray-800">{{ agency.address }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if agency.city %}
|
|
<div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "City" %}</div>
|
|
<div class="text-gray-800">{{ agency.city }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if agency.country %}
|
|
<div class="flex items-start gap-3">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="flag" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Country" %}</div>
|
|
<div class="text-gray-800">{{ agency.get_country_display }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if agency.description %}
|
|
<div class="mt-6 bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
|
|
<h5 class="text-temple-dark font-bold mb-3 flex items-center gap-2">
|
|
<i data-lucide="message-circle" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Description" %}
|
|
</h5>
|
|
<p class="text-gray-700">{{ agency.description|linebreaks }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if generated_password and request.user.is_staff %}
|
|
<div class="mt-6 bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
|
|
<h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
|
|
<i data-lucide="key" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Agency Login Information" %}
|
|
</h5>
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
|
|
<h6 class="text-yellow-800 font-semibold mb-2 flex items-center gap-2">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{% trans "Important Security Notice" %}
|
|
</h6>
|
|
<p class="text-yellow-700 text-sm">
|
|
{% trans "This password provides access to the agency portal. Share it securely with the agency contact person." %}
|
|
</p>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-start gap-3">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="user" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Username" %}</div>
|
|
<div class="bg-white px-3 py-2 rounded-lg border border-gray-300 text-gray-800 font-mono">{{ agency.user.username }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
|
|
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Generated Password" %}</div>
|
|
<div class="flex gap-2">
|
|
<div id="password-value" class="flex-1 bg-white px-3 py-2 rounded-lg border border-gray-300 text-gray-800 font-mono">{{ generated_password }}</div>
|
|
<button type="button" onclick="copyPassword()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-600 rounded-lg text-sm transition">
|
|
<i data-lucide="copy" class="w-4 h-4"></i>
|
|
{% trans "Copy" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="{% url 'regenerate_agency_password' agency.slug %}"
|
|
class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2.5 rounded-lg text-sm transition"
|
|
onclick="return confirm('{% trans "Are you sure you want to regenerate the password for this agency? This cannot be undone." %}');">
|
|
<i data-lucide="key" class="w-4 h-4"></i>
|
|
{% trans "Regenerate Agency Password" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Main Content (2/3 width) -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Tabs Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<!-- Tabs Navigation -->
|
|
<div class="border-b border-gray-200 bg-gray-50 px-4">
|
|
<div class="flex space-x-0">
|
|
<button onclick="switchTab('candidates')" id="tab-candidates"
|
|
class="tab-btn active inline-flex items-center gap-2 px-4 py-3 text-sm font-medium transition border-b-3 border-transparent">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
<span class="text-xs bg-temple-red text-white px-2 py-0.5 rounded-full">{{ total_applications }}</span>
|
|
{% trans "Recent Applications" %}
|
|
</button>
|
|
<button onclick="switchTab('jobs')" id="tab-jobs"
|
|
class="tab-btn inline-flex items-center gap-2 px-4 py-3 text-sm font-medium transition border-b-3 border-transparent text-gray-500 hover:text-gray-700">
|
|
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
|
<span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">{{ total_job_assignments }}</span>
|
|
{% trans "Assigned Jobs" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="p-6">
|
|
<!-- Candidates Tab -->
|
|
<div id="content-candidates" class="tab-content">
|
|
{% if applications %}
|
|
<div class="space-y-3">
|
|
{% for application in applications %}
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-temple-red transition">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<h5 class="font-semibold text-gray-900 mb-1">{{ application.name }}</h5>
|
|
<div class="text-sm text-gray-600 space-y-1">
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="mail" class="w-3 h-3 text-temple-red"></i>
|
|
{{ application.email }}
|
|
</p>
|
|
{% if application.phone %}
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="phone" class="w-3 h-3 text-temple-red"></i>
|
|
{{ application.phone }}
|
|
</p>
|
|
{% endif %}
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="briefcase" class="w-3 h-3 text-temple-red"></i>
|
|
{{ application.job.title }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold rounded-lg stage-badge stage-{{ application.stage }}">
|
|
{{ application.get_stage_display }}
|
|
</span>
|
|
<p class="text-xs text-gray-500 mt-1">{{ application.created_at|date:"M d, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<i data-lucide="user-x" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
|
|
<h5 class="text-lg font-semibold text-gray-900 mb-2">{% trans "No applications yet" %}</h5>
|
|
<p class="text-gray-500">{% trans "This agency hasn't submitted any applications yet." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Jobs Tab -->
|
|
<div id="content-jobs" class="tab-content hidden">
|
|
{% if job_assignments %}
|
|
<div class="space-y-3">
|
|
{% for assignment in job_assignments %}
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-temple-red transition">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<h5 class="font-semibold text-gray-900 mb-1">
|
|
<a href="{% url 'job_detail' assignment.job.slug %}"
|
|
class="text-temple-red hover:text-[#7a1a29] transition">
|
|
{{ assignment.job.title }}
|
|
</a>
|
|
</h5>
|
|
<div class="text-sm text-gray-600 space-y-1">
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="map-pin" class="w-3 h-3 text-temple-red"></i>
|
|
{{ assignment.job.get_location_display }}
|
|
</p>
|
|
{% if assignment.job.department %}
|
|
<p class="flex items-center gap-2">
|
|
<i data-lucide="building-2" class="w-3 h-3 text-temple-red"></i>
|
|
{{ assignment.job.department|default:"" }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold rounded-lg bg-gray-100 text-gray-600">
|
|
{% trans "Assigned" %}
|
|
</span>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
{% trans "Assigned On:" %} {{ assignment.created_at|date:"M d, Y" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<i data-lucide="briefcase" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
|
|
<h5 class="text-lg font-semibold text-gray-900 mb-2">{% trans "No jobs assigned" %}</h5>
|
|
<p class="text-gray-500 mb-4">{% trans "There are no open job assignments for this agency." %}</p>
|
|
<a href="{% url 'agency_assignment_create_with_agency' agency.slug %}"
|
|
class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white px-4 py-2.5 rounded-lg text-sm transition">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
{% trans "Assign New Job" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar (1/3 width) -->
|
|
<div class="space-y-6">
|
|
<!-- Statistics Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="border-b border-gray-200 p-4">
|
|
<h5 class="text-temple-red font-bold flex items-center gap-2">
|
|
<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
|
|
{% trans "Application Statistics" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4 grid grid-cols-2 gap-3">
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
|
|
<div class="text-2xl font-bold text-temple-red">{{ total_applications }}</div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Total" %}</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
|
|
<div class="text-2xl font-bold text-temple-red">{{ active_applications }}</div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Active" %}</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
|
|
<div class="text-2xl font-bold text-green-600">{{ hired_applications }}</div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Hired" %}</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
|
|
<div class="text-2xl font-bold text-red-600">{{ rejected_applications }}</div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Rejected" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agency Information Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="border-b border-gray-200 p-4">
|
|
<h5 class="text-temple-red font-bold flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
{% trans "Agency Information" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4 space-y-4">
|
|
<div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Created" %}</div>
|
|
<div class="text-gray-800">{{ agency.created_at|date:"F d, Y" }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Last Updated" %}</div>
|
|
<div class="text-gray-800">{{ agency.updated_at|date:"F d, Y" }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Agency ID" %}</div>
|
|
<code class="bg-gray-100 px-2 py-1 rounded text-sm text-gray-600">{{ agency.slug }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Tab button styles */
|
|
.tab-btn {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: #1a1a1a;
|
|
border-bottom-color: #9d2235;
|
|
}
|
|
|
|
.tab-btn:hover:not(.active) {
|
|
color: #374151;
|
|
}
|
|
|
|
/* Stage badge colors */
|
|
.stage-Applied { background-color: #e9ecef; color: #495057; }
|
|
.stage-Screening { background-color: #17a2b8; color: white; }
|
|
.stage-Exam { background-color: #ffc107; color: #856404; }
|
|
.stage-Interview { background-color: #17a2b8; color: white; }
|
|
.stage-Offer { background-color: #28a745; color: white; }
|
|
.stage-Hired { background-color: #28a745; color: white; }
|
|
.stage-Rejected { background-color: #dc3545; color: white; }
|
|
</style>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
function switchTab(tabName) {
|
|
// Hide all tab content
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// Remove active state from all tabs
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
btn.classList.add('text-gray-500');
|
|
});
|
|
|
|
// Show selected tab content
|
|
document.getElementById('content-' + tabName).classList.remove('hidden');
|
|
|
|
// Add active state to selected tab
|
|
document.getElementById('tab-' + tabName).classList.add('active');
|
|
document.getElementById('tab-' + tabName).classList.remove('text-gray-500');
|
|
}
|
|
|
|
function copyPassword() {
|
|
const passwordTextEl = document.getElementById('password-value');
|
|
if (!passwordTextEl) return;
|
|
const passwordText = passwordTextEl.textContent;
|
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(passwordText).then(function() {
|
|
showToast('{% trans "Password copied to clipboard!" %}');
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy password: ', err);
|
|
fallbackCopy(passwordText);
|
|
});
|
|
} else {
|
|
fallbackCopy(passwordText);
|
|
}
|
|
}
|
|
|
|
function fallbackCopy(text) {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
showToast('{% trans "Password copied to clipboard!" %}');
|
|
} catch (e) {
|
|
console.error('execCommand fallback failed', e);
|
|
}
|
|
document.body.removeChild(ta);
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.createElement('div');
|
|
toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-pulse';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 2000);
|
|
}
|
|
</script>
|
|
{% endblock %} |