{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Review Processing</title>
        <link rel="stylesheet" href="{% static 'css/lcars.css' %}">
        <link rel="stylesheet" 
              href="{% static 'processing/css/logs.css' %}">
    </head>
    <body>
        <div class="lcars-app-container">
            <!-- HEADER -->
            <div id="header" class="lcars-row header">
                <!-- ELBOW -->
                <div class="lcars-elbow left-bottom lcars-golden-tanoi-bg"
                     id="scroll-up"
                     style="justify-content: center; 
                            align-content: flex-end; 
                            color: #000">
                </div>
                {% if reviewing == 'log' %}
                    <div class="lcars-bar horizontal spacer"></div>
                    {% with 'DEBUG INFO WARNING ERROR CRITICAL' as log_levels %}
                        {% for level in log_levels.split %}
                        <a href="{% url 'processing:review' what=what selected_processing_id=selected_processing_id min_log_level=level sub_process=selected_subp %}">
                            <div class="lcars-bar
                                        button
                                        horizontal
                                        {{level}}-bg 
                                        lcars-u-1">
                                {{level}}
                            </div>
                        </a>
                        {% endfor %}
                    {% endwith %}
                {% endif %}
                <div class="lcars-bar horizontal">
                    <div class="lcars-title right">{{reviewing}}</div>
                </div>
                <!-- ROUNDED EDGE DECORATED -->
                <div class="lcars-bar horizontal right-end decorated"></div>
            </div>

            <!-- LEFT MENU -->
            <div id="left-menu" 
                 class="lcars-column" 
                 style="text-transform: uppercase">
                <div class="lcars-bar spacer"></div>
                <a href="{% url 'processing:review' what=what selected_processing_id=selected_processing_id min_log_level=min_log_level %}">
                    <div class="lcars-bar 
                                button 
                                lcars-u-1-1
                                {% if not selected_subp %}
                                lcars-neon-carrot-bg
                                {% else %}
                                lcars-rust-bg
                                {% endif %}">
                        Main
                    </div>
                </a>
                {% for subp in sub_processes %}
                <a href="{% url 'processing:review' what=what selected_processing_id=selected_processing_id min_log_level=min_log_level sub_process=subp %}"
                   class="subp-select"
                   id="Sub{{forloop.counter0}}">
                    <div class="lcars-bar 
                                button 
                                lcars-u-1-1
                                {% if selected_subp == subp %}
                                lcars-neon-carrot-bg
                                {% else %}
                                lcars-rust-bg
                                {% endif %}">
                        Sub {{subp}}
                    </div>
                </a>
                {% endfor %}
                <div class="lcars-bar lcars-u-1"></div>
            </div>

            <!-- FOOTER -->
            <div id="footer" class="lcars-row ">
                <!-- ELBOW -->
                <div class="lcars-elbow left-top lcars-golden-tanoi-bg"
                     id="scroll-down"
                     style="justify-content: center; 
                            align-content: flex-start; 
                            color: #000">
                </div>
                <!-- BAR -->
                <div class="lcars-bar horizontal both-divider bottom">
                </div>
                <!-- ROUNDED EDGE -->
                <div class="lcars-bar horizontal right-end left-divider bottom">
                </div>
            </div>

            <div id="container"> 
                {% for msg in messages %}
                <div class="log-msg {{msg.0}}">{{msg.1|linebreaks}}</div>
                {% endfor %}
            </div>

        </div>

         <script src="{% static 'processing/js/review_output.js' %}"></script>
    </body>
</html>
