<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <style>
        html, body{
            height: 100%;
{#            width: 100%;#}
            background-color: #ffe;
            font-size: 16px;
            color: #800000;
        }

        .thread {
            display: table;
            height: auto;
            padding: 10px 15px 10px 15px;
            box-sizing: border-box;
            width: 100%;
        }

        .page {
            padding: 5px 15px;
        }
        img {
            float: left;
            height: auto;
            max-width: 25%;
            display: block;
            cursor: zoom-in;
        }

        .right-content {
            float: left;
            height: 100%;
            width: 70%;
            background-color: #f0e0d6;
            padding: 10px 15px 10px 15px;
            margin-left: 15px;
            box-shadow: 1px 1px 3px #888888;
            border-radius: 5px;
        }

        p {
            margin-bottom: 10px;
        }

        span {
            font-size: 14px;
        }

        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 10px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 0;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
        }
        .button:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        }
        .to_right {
            float: right;
        }
    </style>
</head>

<body>
{% for data in all_blocks %}
    <div class="thread" id="{{ data.id }}">
        <div class="image-box">
                <img src="{{ data.image }}" onclick="show_big(this)" data-big=0>
        </div>
        <div class="right-content">
            <p><span>{{ data.created_time}}</span> <span>ID: {{ data.uid }}</span> <span>No.{{ data.id }}</span></p>
            <p>{{ data.content }}</p>
        </div>

    </div>
{% endfor %}

{% if page_obj %}
    <div class="page">
        {% include 'pages.html' %}
    </div>
{% endif %}

<script>
    function show_big(id){
        if (id.dataset.big == 0){
            id.style.width="auto";
            id.style.maxWidth="100%";
            id.dataset.big=1;
            id.style.cursor = 'zoom-out';
        }
        else {
            id.style.width="auto";
            id.style.maxWidth="25%";
            id.dataset.big=0;
            id.style.cursor = 'zoom-out';
        }
    }
</script>
</body>
</html>