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

{% block title %}About Developer{% endblock %}

{% block content %}
<div style="max-width:680px;margin: 0 auto;padding: 12px 0;">
  
  <div class="card" style="padding:40px 32px;text-align:center;position:relative;overflow:hidden;">
    <!-- Abstract gradient glow background -->
    <div style="position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:280px;height:280px;background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);pointer-events:none;z-index:1;"></div>
    
    <div style="position:relative;z-index:2;">
      <!-- Developer Avatar -->
      <div style="width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg, var(--accent), var(--purple));margin:0 auto 24px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 30px var(--accent-glow);border:4px solid var(--sidebar);">
        <i data-lucide="code-2" style="width:44px;height:44px;"></i>
      </div>
      
      {% if var_cms_site.developer_name %}
        <h2 style="font-family:var(--fh);font-size:28px;font-weight:800;letter-spacing:-.8px;margin-bottom:6px;color:var(--text);">
          {{ var_cms_site.developer_name }}
        </h2>
        <div style="font-family:var(--fm);font-size:11px;text-transform:uppercase;color:var(--accent);letter-spacing:1px;font-weight:700;margin-bottom:20px;">
          Lead Developer
        </div>
        
        <p style="color:var(--text-dim);font-size:14px;max-width:480px;margin:0 auto 32px;line-height:1.6;">
          Thank you for using VAR CMS. This dashboard is powered by a premium admin panel structure, optimized with HSL styles, collapsible navigation layouts, and searchable input dropdown controls.
        </p>
        
        <!-- Social/Contact Links -->
        <div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;">
          {% if var_cms_site.developer_website %}
            <a href="{{ var_cms_site.developer_website }}" target="_blank" class="btn btn-ghost" style="display:inline-flex;align-items:center;gap:8px;">
              <i data-lucide="globe" style="width:14px;height:14px;"></i> Website
            </a>
          {% endif %}
          
          {% if var_cms_site.developer_github %}
            <a href="{{ var_cms_site.developer_github }}" target="_blank" class="btn btn-ghost" style="display:inline-flex;align-items:center;gap:8px;">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> GitHub
            </a>
          {% endif %}
          
          {% if var_cms_site.developer_linkedin %}
            <a href="{{ var_cms_site.developer_linkedin }}" target="_blank" class="btn btn-ghost" style="display:inline-flex;align-items:center;gap:8px;">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"></path></svg> LinkedIn
            </a>
          {% endif %}
          
          {% if var_cms_site.developer_email %}
            <a href="mailto:{{ var_cms_site.developer_email }}" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;">
              <i data-lucide="mail" style="width:14px;height:14px;"></i> Send Email
            </a>
          {% endif %}
        </div>
      {% else %}
        <!-- Setup Guide placeholder -->
        <h2 style="font-family:var(--fh);font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:12px;color:var(--text);">
          Configure Developer Settings
        </h2>
        <p style="color:var(--text-dim);font-size:13.5px;max-width:440px;margin:0 auto 24px;line-height:1.6;">
          You can configure the developer's name and social contact coordinates directly in your configuration registry.
        </p>
        
        <div style="background:var(--input);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:left;font-family:var(--fm);font-size:12px;line-height:1.5;max-width:480px;margin:0 auto;">
          <pre style="margin:0;"><code style="color:var(--text);"># var_cms_admin.py
var_cms_site.developer_name = "Rahul Prajapat"
var_cms_site.developer_website = "https://rahul.dev"
var_cms_site.developer_github = "https://github.com"
var_cms_site.developer_linkedin = "https://linkedin.com"
var_cms_site.developer_email = "mail@example.com"</code></pre>
        </div>
      {% endif %}
      
    </div>
  </div>

</div>
{% endblock %}