{% load static %}
{% load i18n %}
{% load plotly_dash%}

<footer>
  <div class="footer navbar navbar-inverse navbar-static-bottom font-golos text-white" role="navigation">
    <div class="navbar-text gh-icon justify-content-start">
      <a href="https://github.com/Mosqlimate-project/Data-platform">
      <i class="fa-brands fa-github fa-2x" style="color: #42464d;"></i></a>
    </div>

    <div class="navbar-text">
      &copy; <a href="https://mosqlimate.org/" style="color: white;">Mosqlimate Project</a>, 2025
    </div>

    <div class="navbar-text partners-funding justify-content-end">
      <div class="funding">
          <div class="funding-text">Funding:</div>
        <a href="https://wellcome.org/">
          <img class="d-inline-block wt-logo" src="{% static 'img/WT-logo-white.png' %}" alt="wt-logo" width="70">
        </a> 
      </div>
      <div class="partners">
          <div class="partner-text">Partners:</div>
        <a href="https://info.dengue.mat.br/">
          <img class="d-inline-block infodengue-logo" src="{% static 'img/infodengue-logo.png' %}" alt="infodengue-logo" width="90">
        </a> 
      </div>
    </div>
  </div>
  {% plotly_footer %}
</footer>

<style>
  footer {
    transition: all 0.2s ease;
  }

  .footer {
    background-color: #161616;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: var(--border);
    opacity: 1;
    width: 100%;
    color: white;
  }

  .navbar-text {
    display: flex;
    flex: 1;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    color: white;
  }

  .partners-funding {
    margin-top: -10px;
    display: flex;
    flex-direction: row;
  }

  .funding {
    padding-right: 40px;
  }

  .funding-text .partner-text {
    text-align: center;
  }

  .infodengue-logo {
    margin-top: 10px;
  }
</style>