{% extends 'base.html' %}
{% block content %}
<div class="row g-4">
  <div class="col-12">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
          <div>
            <h2 class="h4 mb-1">Configuración del sitio web</h2>
            <p class="text-muted mb-0">Estos datos alimentan el sitio público y la base mínima para receta electrónica, validación pública y homologación de la solución.</p>
          </div>
          <span class="badge text-bg-dark">Solo administrador</span>
        </div>
        <form method="post" enctype="multipart/form-data" class="row g-3 geo-form">
          <div class="col-md-6"><label class="form-label">Título del sitio</label><input class="form-control" name="site_title" value="{{ settings.title }}" required></div>
          <div class="col-md-3"><label class="form-label">Teléfono</label><input class="form-control" name="site_phone" value="{{ settings.phone }}"></div>
          <div class="col-md-3"><label class="form-label">Email</label><input class="form-control" name="site_email" value="{{ settings.email }}"></div>
          <div class="col-md-6"><label class="form-label">URL pública</label><input class="form-control" name="site_url" value="{{ settings.url }}"></div>
          <div class="col-md-3"><label class="form-label">N° Plataforma</label><input class="form-control" name="site_platform_number" value="{{ settings.platform_number }}" placeholder="0000"></div>
          <div class="col-md-3"><label class="form-label">N° Repositorio</label><input class="form-control" name="site_repository_number" value="{{ settings.repository_number }}" placeholder="0000"></div>
          <div class="col-md-6"><label class="form-label">Logo</label><input type="file" class="form-control" name="site_logo" accept="image/*">{% if settings.logo_path %}<div class="small text-muted mt-1">Actual: {{ settings.logo_path }}</div>{% endif %}</div>
          <div class="col-md-6"><label class="form-label">Ícono / Favicon</label><input type="file" class="form-control" name="site_favicon" accept="image/*">{% if settings.favicon_path %}<div class="small text-muted mt-1">Actual: {{ settings.favicon_path }}</div>{% endif %}</div>
          <div class="col-md-3"><label class="form-label">País</label><input class="form-control" name="site_country" value="{{ settings.country }}"></div>
          <div class="col-md-3"><label class="form-label">Provincia</label>
            <input class="form-control geo-native-input geo-province-input" list="siteProvinceList" value="{{ settings.province }}" placeholder="Escribí y seleccioná provincia" autocomplete="off">
            <datalist id="siteProvinceList" class="geo-province-list"></datalist>
            <input type="hidden" name="province_name" class="geo-province-name" value="{{ settings.province }}">
            <input type="hidden" name="site_province" class="geo-province-id">
          </div>
          <div class="col-md-3"><label class="form-label">Partido / Municipio</label>
            <input class="form-control geo-native-input geo-municipality-input" list="siteMunicipalityList" value="{{ settings.municipality }}" placeholder="Escribí y seleccioná partido / municipio" autocomplete="off">
            <datalist id="siteMunicipalityList" class="geo-municipality-list"></datalist>
            <input type="hidden" name="municipality_name" class="geo-municipality-name" value="{{ settings.municipality }}">
            <input type="hidden" name="site_municipality" class="geo-municipality-id">
          </div>
          <div class="col-md-3"><label class="form-label">Ciudad / Localidad</label>
            <input class="form-control geo-native-input geo-city-input" list="siteCityList" value="{{ settings.city }}" placeholder="Escribí y seleccioná ciudad / localidad" autocomplete="off">
            <datalist id="siteCityList" class="geo-city-list"></datalist>
            <input type="hidden" name="city_name" class="geo-city-name" value="{{ settings.city }}">
            <input type="hidden" name="site_city" class="geo-city-id">
          </div>

          <div class="col-12 pt-2"><h3 class="h6 mb-0">Redes sociales</h3></div>
          {% for network, label, icon in [('facebook','Facebook','bi-facebook'),('instagram','Instagram','bi-instagram'),('x','X / Twitter','bi-twitter-x'),('youtube','YouTube','bi-youtube'),('linkedin','LinkedIn','bi-linkedin')] %}
          <div class="col-md-2 d-flex align-items-end"><div class="form-check"><input class="form-check-input" type="checkbox" name="site_social_{{ network }}_enabled" {% if settings.socials_raw[network].enabled %}checked{% endif %}><label class="form-check-label"><i class="bi {{ icon }}"></i> {{ label }}</label></div></div>
          <div class="col-md-10"><label class="form-label">URL {{ label }}</label><input class="form-control" name="site_social_{{ network }}_url" value="{{ settings.socials_raw[network].url }}"></div>
          {% endfor %}
          <div class="col-12 d-grid"><button class="btn btn-primary btn-lg">Guardar configuración del sitio</button></div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}