{% extends "base_vue.html" %}

{% from "_macros.html" import render_resource_link, render_rdfa_resource_link, get_label, facts_panel, summary_panel, content %}
{% block title %}{{config['SITE_NAME']}}{% endblock %}

{% block pageheader %}
<div class="jumbotron" style="color: #eee; background-color: #08233c; background: url('{{config['SITE_HEADER_IMAGE']}}') no-repeat top center; background-size:cover; padding-top:2rem; padding-bottom:2rem;">
  <div class="container" style="text-shadow: 0px 0px 20px black;">
    <h1 class="">{{title()}}</h1>
    {% if 'SITE_DESCRIPTION' in config %}
    <p class="lead">{{config['SITE_DESCRIPTION']}}</p>
    {% else %}
    {% for property, value in g.get_summary(this.description())%}
    <p class="lead">{{value}}</p>
    {% endfor %}
    {% endif %}
  </div>
</div>
{% endblock %}

{% block content %}
<div class="row" >
    {{ content(this.description()) }}
</div>
<div>
<p>
  {% if app.db | length == 0 %}
    {% if not current_user or current_user.is_anonymous %}
        <div class="text-center py-5">
          <div class="mb-4">
            <i class="bi bi-person-circle display-1 text-muted"></i>
          </div>
          <h3 class="mb-3">Log in or Register to begin</h3>
          <p class="text-muted mb-4">Log in or create an account to begin populating your knowledge graph.</p>
          <div class="d-flex gap-3 justify-content-center">
            <a href="{{url_for('security.login')}}" class="btn btn-primary" aria-label="Log in" title="">
              <i class="bi bi-box-arrow-in-right"></i> Log in
            </a>
            <a href="{{url_for('security.register')}}" class="btn btn-primary" aria-label="Register" title="">
              <i class="bi bi-person-plus"></i> Register
            </a>
          </div>
        </div>
    {% else %}
      <div class="text-center py-5">
        <div class="mb-4">
          <i class="bi bi-diagram-3 display-1 text-muted"></i>
        </div>
        <h3 class="mb-3">Add Knowledge</h3>
        <p class="text-muted mb-4">Build your knowledge graph by adding ontologies and RDF.</p>
        <button type="button" class="btn btn-primary"  data-bs-toggle="modal"
                data-bs-target="#uploadKnowledgeModal"
                aria-label="Add Knowledge"
                title="">
          <i class="bi bi-upload"></i>
          Add Knowledge
        </button>
      </div>
    {% endif %}
  {% else %}
  <album instancetype="{{this.identifier}}"></album>
  {% endif %}
</p>

{% endblock %}