{% extends 'base.html' %}
{% block title %}{{ note.title }} · Mini Suite{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h1 class="h4 mb-0">{{ note.title }}</h1>
  <div class="btn-group">
    <a href="{{ url_for('notes.edit', id=note.id) }}" class="btn btn-primary">
      <i class="bi bi-pencil me-1"></i>Edit
    </a>
    <a href="{{ url_for('notes.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Back to Notes
    </a>
  </div>
</div>

<div class="row">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body">
        <div class="mb-3">
          <small class="text-muted">
            Created {{ note.created_at.strftime('%B %d, %Y at %I:%M %p') }}
            {% if note.updated_at != note.created_at %}
              · Updated {{ note.updated_at.strftime('%B %d, %Y at %I:%M %p') }}
            {% endif %}
          </small>
        </div>
        
        {% if note.content %}
          <div class="note-content">
            {{ note.content|replace('\n', '<br>')|safe }}
          </div>
        {% else %}
          <p class="text-muted fst-italic">No content</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<style>
.note-content {
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>
{% endblock %}