<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" data-theme="${data_theme}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>${display_name_escaped}</title>

    <link charset="utf-8" rel="stylesheet" type="text/css" href="static/base.css" />
    <link charset="utf-8" rel="stylesheet" type="text/css" href="static/detail.css" />
    <link charset="utf-8" rel="stylesheet" type="text/css" href="static/progress-spinner.css" />
    
    <script type="text/javascript" charset="utf-8" src="static/integration.js"></script>
</head>

<body class="product software">
    <div id="page">
        <div id="wrapper">
            <div id="content">
                <div class="background"></div>
                <div class="columns">
                    <div class="main">
                        <div class="product-detail">
                            <div class="lockup product">
                                <div class="artwork">
                                    <img width="175" height="175" alt="${display_name_escaped}" class="artwork" src="${icon}" />
                                </div>
                            </div>
                            <div class="product-info box-flex">
                                <div class="product-review">
                                    <div class="title">
                                        <h1>${display_name_escaped}</h1>
                                    </div>
                                    <a href="${developer_link}">${developer_escaped}</a>
                                    <p class="more-text">
                                    ${description}
                                    </p>
                                </div>
                            </div>
                            <div class="product-btn box-flex">
                                <div class="msc-button large ${hide_cancel_button}">
                                    <button class="button-area uppercase"
                                     onClick="window.webkit.messageHandlers.actionButtonClicked.postMessage('${name_quoted}');">
                                        <div class="msc-button-inner large ${status}"
                                             id="${name_escaped}_action_button_text">
                                            ${long_action_text}
                                        </div>
                                    </button>
                                </div>
                                <div class="warning">
                                    <br/>&nbsp;
                                    ${restart_action_text}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Item information block -->
                    <div class="titled-box app-info">
                        <h2>${informationLabel}</h2>
                        <div class="lockup-container content" data-columns-current="1">
                            <div class="content-and-controls detail-page information-list">
                                <div class="lockup small detailed option information-item">
                                    <div class="label">${developerLabel}</div>
                                    <a href="${developer_link}">${developer_escaped}</a>
                                </div>
                                <div class="lockup small detailed option information-item">
                                    <div class="label">${sizeLabel}</div>
                                    ${size}
                                </div>
                                <div class="lockup small detailed option information-item">
                                    <div class="label">${categoryLabel}</div>
                                    <a href="${category_link}">${category}</a>
                                </div>
                                <div class="lockup small detailed option information-item">
                                    <div class="label">${versionLabel}</div>
                                    ${display_version}
                                </div>
                                <div class="lockup small detailed option information-item">
                                    <div class="label">${statusLabel}</div>
                                    <span class="${status}" id="${name_escaped}_status_text">
                                        <span id="${name_escaped}_status_text_span">
                                            ${status_text}
                                        </span>
                                        <a class="follow" href="munki://updates.html"></a>
                                        <div class="spinner left">
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                            <div class="spinner-blade"></div>
                                        </div>
                                    </span>
                                </div>
                                <div class="lockup small detailed option information-item">
                                    <div class="label warning">${dueLabel}</div>
                                    <span class="warning"${short_due_date}</span>
                                    <span class="warning">${restart_action_text}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- More in category list -->
                    <div class="titled-box more-by ${hide_more_in_category}">
                        <div class="more-items-header">
                            <div class="more-items-header-inner">
                                <h2>${moreInCategoryLabel}</a></h2>
                                <a href="${category_link}">${seeAllLocalizedString}</a>
                            </div>
                        </div>
                        <div class="lockup-container content" data-columns-current="1">
                            <div class="content-and-controls detail-page">
                                ${more_in_category}
                            </div>
                        </div>
                    </div>
                    <!-- More by developer list -->
                    <div class="titled-box more-by ${hide_more_by_developer}">
                        <div class="more-items-header">
                            <div class="more-items-header-inner">
                                <h2>${moreByDeveloperLabel}</a></h2>
                                <a href="${developer_link}">${seeAllLocalizedString}</a>
                            </div>
                        </div>
                        <div class="lockup-container content" data-columns-current="1">
                            <div class="content-and-controls detail-page">
                                ${more_by_developer}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
