{% extends 'admin/base.html.twig' %}

{% block title %}{{ shortcode.name }} | Admin | Universities.com{% endblock %}

{% block body %}
    <div class="container">

        <div class="row">
            <div class="col-md-6">
                <div class="page-name-box">
                    <div class="page-name-right mb-3">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ path("admin_dashboard") }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ path("admin_shortcodes") }}">Shortcodes</a></li>
                            <li class="breadcrumb-item active">{{ shortcode.name }}</li>
                        </ol>
                    </div>
                </div>
                <h1 class="fw-light mb-3">{{ shortcode.name }}</h1>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="{{ path('admin_shortcodes') }}" class="btn btn-primary mb-3">Back to Shortcodes</a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="row border-bottom border-1 pb-2">
                                    <div class="col-lg-3">Name</div>
                                    <div class="col-lg-9 fw-light text-primary">{{ shortcode.name }}</div>
                                </div>
                                <div class="row border-bottom border-1 py-2">
                                    <div class="col-lg-3">Slug</div>
                                    <div class="col-lg-9 fw-light text-primary">{{ shortcode.slug }}</div>
                                </div>
                                <div class="mt-2">
                                    <div class="mb-3">Widgets</div>
									<ul class="list-group mb-3">
                                        {% for shortcode_widget in shortcode.widgets %}
										<li class="list-group-item d-flex justify-content-between align-items-start">
											<div class="ms-2 me-auto">
												<div class="fw-bold text-primary">{{ shortcode_widget.widget.name }}</div>
                                                <span class="small text-black-50">{{ shortcode_widget.widget.type|replace({'_': ' ', '-': ' '})|title }}</span>
											</div>
											<span class="badge bg-primary">{{ shortcode_widget.weight }}</span>
										</li>
                                        {% endfor %}
									</ul>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <a href="{{ path('admin_shortcode_edit', {'id': shortcode.id}) }}" class="d-block w-100 btn btn-primary mb-3">Edit</a>
                                <div class="mb-3 border-bottom border-1">
                                    <div class="mb-2">ID</div>
                                    <div class="mb-2 fw-light text-primary">{{ shortcode.id }}</div>
                                </div>
                                <div class="mb-3 border-bottom border-1">
                                    <div class="mb-2">Active</div>
                                    <div class="mb-2 fw-light text-primary">{{ shortcode.active ? 'Yes' : 'No' }}</div>
                                </div>
                                <div class="mb-3 border-bottom border-1">
                                    <div class="mb-2">Created</div>
                                    <div class="mb-2 fw-light text-primary">{{ shortcode.created ? shortcode.created|date('m/d/Y g:i:s a') : '' }}</div>
                                </div>
                                <div class="mb-3">
                                    <div class="mb-2">Updated</div>
                                    <div class="mb-2 fw-light text-primary">{{ shortcode.updated ? shortcode.updated|date('m/d/Y g:i:s a') : '' }}</div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}