{% extends layout %}

{% block title %}{{ $post->getTitle() }}{% endblock %}

{% block content %}
<div id="overview">
  <h1>{{ $post->getTitle() }}</h1>
  <section class="post-view">
    {% if ($isLoggedIn): %}
      <form id="editForm" method="post" action="/post/{{ $post->getId() }}/edit" style="display:none;">
        <textarea name="content" rows="10" cols="80">{{ $post->getContent() }}</textarea>
        <br>
        <button type="submit">Speichern</button>
        <button type="button" onclick="toggleEdit(false)">Abbrechen</button>
        <input type="hidden" name="_csrf_token" value="{{ $csrf }}">
      </form>
      <p id="postContent">{{ $post->getContent() }}</p>
      <button id="editBtn" onclick="toggleEdit(true)">Bearbeiten</button>
      <form action="/post/delete/{{ $post->getId() }}" method="post" onsubmit="return confirm('Beitrag wirklich löschen?');">
        <input type="hidden" name="_csrf_token" value="{{ $csrf }}">
        <button type="submit">Löschen</button>
      </form>
      <script>
        function toggleEdit(edit) {
          document.getElementById('editForm').style.display = edit ? 'block' : 'none';
          document.getElementById('postContent').style.display = edit ? 'none' : 'block';
          document.getElementById('editBtn').style.display = edit ? 'none' : 'inline';
        }
      </script>
    {% else: %}
      <p>{{ $post->getContent() }}</p>
    {% endif; %}
  </section>
  <a href="/">back</a>
</div>
{% endblock %}