{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Welcome to grgr's library {% endblock %}</h1>

        <div class="all-cards">
            <div class="card" id="new-card">
				<a class="nav-link" href="{{ url_for('create') }}">+</a>
            </div>
            {% for category, cards in categories.items() %}
            

                {% for card in cards %}
                <div class="card">
                    <div class="card-header">
                        <h6 class = "category">{{ category }}</h6>

                        <button class="btn" id="edit-btn">
                            <a class="btn btn-warning btn-sm" href="{{ url_for('edit', id=card['id']) }}">edit</a>
                        </button>
            
            
                        <div class="btn" id="delete-btn">
                            <form action="{{ url_for('delete', id=card['id']) }}" method="POST">
                                <input type="submit" value="delete" class="btn btn-danger btn-sm">
                            </form>
                        </div>
                        
                        
                        
                    </div>

                    {% if card['topics'] %}
                        <div class="topics">
                            {% for topic in card['topics'] %}
                                <span class="topic-tag">
                                    {{ topic['content'] }}
                                </span>
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <div class="list-group-card">{{ card['content'] }}</div>
                
                        <div class="row">
                
                            
                        </div>
                </div>
                {% endfor %}
            
            {% endfor %}
        
        </div>
    
{% endblock %}
<!-- {#<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>library</title>
        <link rel="stylesheet" href="{{url_for('static', filename='style_default.css')}}">
        <script src="{{url_for('static', filename='addnew_panel.js')}}"></script>
	</head>
	<body>
		hello here a list of:
        <button id="new" onclick="openPanel()">add new element</button>
        <table>
            {% for row in reading_list%}
            <tr>
                <td>{{row['author']| safe}}</td>
                <td>{{row['title']|safe}}</td>
                <td>{{row['description']|safe}}</td>
            </tr>
            {% endfor %}
        </table>

        <div class="formPanel" id="formPanel">
            <button onclick="closePanel()">X</button>
            <form method="POST" enctype="multipart/form-data">
                <input type="text" name="author" placeholder="Author"/>
                <input type="text" name="title" placeholder="Title"/>
                <textarea name="description" cols="30" rows="10" placeholder="description"></textarea>
                <input type="submit" value="Add" />
            </form>
        </div>

	</body>
</html> #}-->
