{% extends 'base.html' %}
{% load static %}

{% block title %}{{ problem.title }}{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h1>{{ problem.title }}</h1>
        </div>
        <div class="card-body">
            <h5 class="card-title">Author: {{ problem.author }}</h5>
            <p class="card-text"><strong>Level:</strong> {{ problem.level|title }}</p>
            <p class="card-text"><strong>Type:</strong> {{ problem.type|title }}</p>
            <p class="card-text"><strong>Supported Languages:</strong> {{ problem.supported_languages }}</p>
            <p class="card-text"><strong>Memory Limit:</strong> {{ problem.memory_limit }} MB</p>
            <p class="card-text"><strong>Time Limit:</strong> {{ problem.time_limit }} seconds</p>
            <p class="card-text"><strong>Points:</strong> {{ problem.point }}</p>
            <hr>
            <h4>Description</h4>
            <p>{{ problem.description }}</p>
            <hr>
            <h4>Input and Output Methods</h4>
            <p>{{ problem.input_and_output_methods }}</p>
        </div>
        <div class="card-footer text-muted">
            Created on {{ problem.created_day|date:"F d, Y" }}
            {% if problem.access_code %}
                | <strong>Access Code:</strong> {{ problem.access_code }}
            {% endif %}
        </div>
    </div>
    <a href="{% url 'core:index' %}" class="btn btn-primary mt-3">Back to Problems</a>
</div>
{% endblock %}