When is the index.hbs loaded in an Ember app? What is the difference between a component and a template?

I was following this Ember tutorial and this quickly got a lot more complicated. This was the tutorial that I was following.

I am lost as to what is going on. When is the index.hbs getting loaded and why? Here is my code starting with the router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('todos', { path: '/'}, function() {
    this.route('complete');
    this.route('incomplete');
  });
});

export default Router;

So it looks like our home url will load the todos.js route right? This is my code:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let todos = [
      {
        title: 'Learn Ember',
        complete: false,
      },
      {
        title: 'Solve World Hunger',
        complete: false,
      }
    ];
    return todos;
  }
});

So this todos.js route is my model right?

I assume ember also loads the todos.hbs template by default? Is that right? Or does it load the app/templates/todos/index.hbs? Which one does it load?

This is my app/templates/todos.hbs code:

<input type="text" id="new-todo" placeholder="What needs to be done?" />
{{#todo-list todos=model}}
    {{outlet}}
{{/todo-list}}

This is my app/templates/todos/index.hbs code:

<ul id="todo-list">
    {{#each model as |todo|}}
         <!-- this loads the component todo-item and passes in a todo as todo -->
        {{todo-item todo=todo}}
    {{/each}}
</ul>

The tutorial doesn't really explain what is going on here. If the index.hbs gets loaded, does it then load the todo-item component template? If so, this is my app/templates/components/todo-item.hbs:

<input type="checkbox" class="toggle" checked="{{if todo.complete 'checked'}}">  
<label class="{{if todo.complete 'completed'}}">{{todo.title}}</label><button class="destroy"></button>

In the event that the app/templates/todos.hbs gets loaded...What is going on in the app/templates/todos.hbs? Are we passing in the model (somehow accessible in the template?) as todos to the todo-list component? Here is the app/templates/components/todo-list.hbs

<section id="main">
    {{yield}}

    <input type="checkbox" id="toggle-all">
</section>

<footer id="footer">
    <span id="todo-count">
        <strong>2</strong> todos left
    </span>
    <ul id="filters">
        <li>
            <a href="all" class="selected">All</a>
        </li>
        <li>
            <a href="active">Active</a>
        </li>
        <li>
            <a href="completed">Completed</a>
        </li>
    </ul>

    <button id="clear-completed">
        Clear completed (1)
    </button>
</footer>