/**
     * Output the Project Index interface.
     *
     * @since 1.0.0
     *
     * @global string $plugin_page The slug of the current admin page.
     */
    protected static function project_index()
    {
        global $plugin_page;
        $projects = new Projects();
        $projects->scan();
        ?>
		<div class="tablenav top">
			<div class="alignleft actions">
				<label for="filter_by_type" class="screen-reader-text"><?php 
        _e('Filter by type', 'pomo-editor');
        ?>
</label>
				<select id="filter_by_type" class="pomoeditor-filter">
					<option value=""><?php 
        _e('All types', 'pomo-editor');
        ?>
</option>
					<?php 
        foreach ($projects->types() as $type => $label) {
            ?>
					<option value="<?php 
            echo $type;
            ?>
"><?php 
            echo $label;
            ?>
</option>
					<?php 
        }
        ?>
				</select>
				<label for="filter_by_package" class="screen-reader-text"><?php 
        _e('Filter by package', 'pomo-editor');
        ?>
</label>
				<select id="filter_by_package" class="pomoeditor-filter">
					<option value=""><?php 
        _e('All packages', 'pomo-editor');
        ?>
</option>
					<?php 
        foreach ($projects->packages() as $package => $label) {
            ?>
					<option value="<?php 
            echo $package;
            ?>
"><?php 
            echo $label;
            ?>
</option>
					<?php 
        }
        ?>
				</select>
				<label for="filter_by_language" class="screen-reader-text"><?php 
        _e('Filter by type', 'pomo-editor');
        ?>
</label>
				<select id="filter_by_language" class="pomoeditor-filter">
					<option value=""><?php 
        _e('All languages', 'pomo-editor');
        ?>
</option>
					<?php 
        foreach ($projects->languages() as $language => $label) {
            ?>
					<option value="<?php 
            echo $language;
            ?>
"><?php 
            echo $label;
            ?>
</option>
					<?php 
        }
        ?>
				</select>
				<label>
					<input type="checkbox" id="filter_modded_only" class="pomoeditor-filter" />
					<?php 
        _e('Show Edited Files Only', 'pomo-editor');
        ?>
				</label>
			</div>
		</div>

		<table id="pomoeditor_projects" class="wp-list-table widefat fixed striped">
			<thead>
				<tr>
					<th class="manage-column column-pmeproject-file"><?php 
        _e('File', 'pomo-editor');
        ?>
</th>
					<th class="manage-column column-pmeproject-title column-primary"><?php 
        _e('Package', 'pomo-editor');
        ?>
</th>
					<th class="manage-column column-pmeproject-type"><?php 
        _e('Type', 'pomo-editor');
        ?>
</th>
					<th class="manage-column column-pmeproject-language"><?php 
        _e('Language', 'pomo-editor');
        ?>
</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

		<script type="text/template" id="pomoeditor_item_template">
			<td class="column-pmeproject-file"><a href="<?php 
        echo admin_url("tools.php?page={$plugin_page}&pofile=");
        ?>
<%= file.dirname %>/<%= file.basename %>" target="_blank">
				<%= file.dirname %>/<strong><%= file.basename %></strong>
			</a></td>
			<td class="column-pmeproject-title"><%= pkginfo.name %></td>
			<td class="column-pmeproject-type"><%= pkginfo.type %></td>
			<td class="column-pmeproject-language"><%= language.name %></td>
		</script>

		<script>
		POMOEditor.Projects = new POMOEditor.Framework.Projects(<?php 
        echo json_encode($projects->dump());
        ?>
);

		POMOEditor.List = new POMOEditor.Framework.ProjectsList( {
			el: document.getElementById( 'pomoeditor_projects' ),

			collection: POMOEditor.Projects,

			itemTemplate: document.getElementById( 'pomoeditor_item_template' ),
		} );
		</script>
		<?php 
    }