{% extends "cms/base.html" %}
{% load static %}
{% block title %}Company Profile — CMS{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<style>
  .req { color:var(--cms-accent);margin-left:3px;font-weight:700; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:var(--cms-primary); }
  .form-table .ck-editor { width:100% !important; }
  .form-table .ck-editor__editable { min-height:200px; box-sizing:border-box; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>Company Profile</h2>
    <div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">Homepage</div>
  </div>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_homepage' %}#footer-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>

<form method="post" id="footerForm">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Footer Tagline</div>
      <div style="padding:.75rem 1rem">
        <div style="font-size:.8rem;font-weight:600;color:var(--cms-muted);margin-bottom:.5rem">Shown under the logo in the footer</div>
        <textarea name="footer_tagline" id="id_footer_tagline" class="django_ckeditor_5">{{ obj.footer_tagline }}</textarea>
        <input type="hidden" id="id_footer_tagline_script-ck-editor-5-upload-url"
               data-upload-url="{% url 'ck_editor_5_upload_file' %}"
               data-upload-file-types='["jpeg","jpg","png","gif","webp","svg"]'
               data-csrf_cookie_name="csrftoken">
        <span id="id_footer_tagline_script-span" style="display:none;">{{ ck_config|safe }}</span>
      </div>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Profile</button>
    </div>

    <a href="{% url 'cms_homepage' %}#footer-sections" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
{% endblock %}